HTML Form

Introduction

HTML Form adalah komponen fundamental dalam pengembangan web yang digunakan untuk mengumpulkan data dari pengguna. Mulai dari login, registrasi, pencarian, hingga checkout e-commerce semuanya bergantung pada form.

Form berperan sebagai jembatan antara user interface (frontend) dan server (backend). Tanpa form, interaksi dinamis antara pengguna dan aplikasi web akan sangat terbatas.

1. Struktur Dasar Form

Struktur paling sederhana dari HTML Form terdiri dari tag <form>, <label>, dan <input>.

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />

  <button type="submit">Kirim</button>
</form>

Penjelasan:

<form>: Container utama form
<label>: Deskripsi untuk input
<input>: Elemen untuk menerima input user

2. Atribut Penting

2.1. `name`

Digunakan sebagai key saat data dikirim ke server.

<input type="text" name="username" />

2.2. `id`

Digunakan untuk menghubungkan <label> dengan <input>.

<label for="username">Username</label>
<input id="username" />

2.3. `type`

Menentukan jenis input:

<!-- Input teks dasar -->
<input type="text" />           <!-- Teks biasa -->
<input type="password" />       <!-- Input password (disembunyikan) -->
<input type="email" />          <!-- Validasi email -->
<input type="search" />         <!-- Input pencarian -->
<input type="tel" />            <!-- Nomor telepon -->
<input type="url" />            <!-- URL -->

<!-- Input numerik -->
<input type="number" />         <!-- Angka -->
<input type="range" />          <!-- Slider angka -->

<!-- Input tanggal & waktu -->
<input type="date" />           <!-- Tanggal -->
<input type="datetime-local" /> <!-- Tanggal & waktu lokal -->
<input type="month" />          <!-- Bulan -->
<input type="week" />           <!-- Minggu -->
<input type="time" />           <!-- Waktu -->

<!-- Input pilihan -->
<input type="checkbox" />       <!-- Pilihan jamak -->
<input type="radio" />          <!-- Pilihan tunggal -->

<!-- Input file & warna -->
<input type="file" />           <!-- Upload file -->
<input type="color" />          <!-- Picker warna -->

<!-- Input aksi -->
<input type="submit" />         <!-- Tombol submit -->
<input type="reset" />          <!-- Reset form -->
<input type="button" />         <!-- Tombol biasa -->

<!-- Input tersembunyi -->
<input type="hidden" />         <!-- Data tersembunyi -->

<!-- Input gambar sebagai tombol -->
<input type="image" src="submit.png" alt="Submit" />

3. Mekanisme Pengiriman Data

Atribut penting dalam <form>:

<form action="/submit" method="POST">

3.1. `action`

Menentukan URL tujuan data dikirim.

3.2. `method`

Menentukan metode HTTP:

GET
- Data dikirim melalui URL
- Contoh: /submit?username=andi
- Cocok untuk pencarian
POST
- Data dikirim melalui body request
- Lebih aman untuk data sensitif

4. Pengelompokan dengan `<fieldset>` dan `<legend>`

Digunakan untuk mengelompokkan form secara semantik.

<form>
  <fieldset>
    <legend>Informasi Akun</legend>

    <label>Email:</label>
    <input type="email" name="email" />

    <label>Password:</label>
    <input type="password" name="password" />
  </fieldset>
</form>

5. Variasi Input

5.1. Checkbox

<label>
  <input type="checkbox" name="hobi" value="membaca" />
  Membaca
</label>

5.2. Radio Button

<label>
  <input type="radio" name="gender" value="pria" />
  Pria
</label>

<label>
  <input type="radio" name="gender" value="wanita" />
  Wanita
</label>

<select name="kota">
  <option value="jakarta">Jakarta</option>
  <option value="bandung">Bandung</option>
</select>

5.4. Textarea

<textarea name="pesan" rows="4" cols="50"></textarea>

6. Validasi Bawaan HTML5

HTML5 menyediakan validasi tanpa JavaScript.

6.1. `required`

<input type="text" name="username" required />

6.2. `pattern`

<input type="text" pattern="[A-Za-z]{3,}" />

Hanya huruf, minimal 3 karakter

6.3. `minlength` & `maxlength`

<input type="password" minlength="6" maxlength="12" />

Best Practices

Gunakan <label> dengan benar:

<label for="email">Email</label>
<input type="email" id="email" name="email" />

Keuntungan:

Mendukung screen reader
Area klik lebih luas

2. Placeholder vs Label

Tidak disarankan:

<input type="text" placeholder="Masukkan nama" />

Disarankan:

<label for="nama">Nama</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama" />

HTML Form

On this page