Hampir setiap aplikasi web punya form: daftar akun, login, checkout, kolom komentar, sampai pencarian. Elemen <form> membungkus semua kolom isian dan menentukan ke mana datanya dikirim.

<form action="/daftar" method="post">
  <label for="nama">Nama lengkap</label>
  <input type="text" id="nama" name="nama" required>

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

Hasilnya: teks "Nama lengkap", sebuah kotak isian, dan tombol "Daftar". Kalau kotak dibiarkan kosong lalu tombol diklik, browser menahan pengiriman dan menampilkan pesan seperti "Please fill out this field".

Dua atribut penting di <form>:

• action: alamat tujuan data. Kalau dikosongkan, data dikirim ke halaman yang sama.
• method: get menaruh data di URL (cocok untuk pencarian), post mengirimnya di badan request (cocok untuk data pribadi seperti password).

Di setiap input, atribut name adalah nama data saat dikirim. Input tanpa name tidak ikut terkirim, walaupun sudah diisi.

<label> adalah teks keterangan untuk sebuah input. Hubungkan keduanya dengan for di label yang nilainya sama dengan id di input.

Manfaatnya:

1. Screen reader membacakan "Nama lengkap, edit text" saat input difokus. Tanpa label, pengguna tunanetra tidak tahu kolom itu untuk apa.
2. Mengklik teks label ikut memfokuskan input. Untuk checkbox kecil di HP, area klik jadi jauh lebih besar.

Cara lain adalah membungkus input di dalam label: <label>Setuju <input type="checkbox" name="setuju"></label>. Keduanya sah, tapi pasangan for/id lebih umum.

placeholder bukan pengganti label. Placeholder hilang begitu pengguna mulai mengetik, warnanya pucat, dan tidak selalu dibacakan screen reader. Pakai placeholder hanya untuk contoh format, misalnya placeholder="nama@email.com".

Dulu hampir semua kolom memakai type="text". HTML5 menambahkan tipe khusus yang memberi validasi dan tampilan yang pas:

Kalau browser tidak mengenal suatu tipe, ia akan memperlakukannya sebagai text. Jadi memakai tipe baru itu aman.

<label for="umur">Umur</label>
<input type="number" id="umur" name="umur" min="13" max="100" step="1">

<label for="vol">Volume</label>
<input type="range" id="vol" name="vol" min="0" max="10" value="5">

Input umur menolak nilai di bawah 13 atau di atas 100. Slider volume dimulai dari tengah karena value="5".

• required: kolom wajib diisi.
• min, max, step: batas dan kelipatan untuk number, range, dan date.
• minlength, maxlength: batas jumlah karakter teks.
• pattern: aturan berupa regular expression. Contoh pattern="[0-9]{5}" artinya tepat lima digit, misalnya kode pos. Pola selalu dicocokkan dengan seluruh isi, bukan sebagian.
• autocomplete: memberi petunjuk ke browser untuk mengisi otomatis, misalnya autocomplete="email", "name", atau "new-password". Pengguna jadi tidak perlu mengetik ulang.
• autofocus: fokus otomatis saat halaman dimuat. Pakai seperlunya, satu per halaman.

Saran isian dengan datalist

<datalist> memberi daftar saran untuk sebuah input, tapi pengguna tetap boleh mengetik nilai lain. Hubungkan lewat atribut list di input yang nilainya sama dengan id datalist.

<label for="kota">Kota</label>
<input id="kota" name="kota" list="daftar-kota">
<datalist id="daftar-kota">
  <option value="Bandung">
  <option value="Surabaya">
  <option value="Yogyakarta">
</datalist>

Saat pengguna mengetik "Ba", browser menampilkan saran "Bandung" di bawah kolom. Bedanya dengan <select>: select membatasi pilihan, datalist hanya menyarankan.

<label for="kelas">Pilih kelas</label>
<select id="kelas" name="kelas">
  <option value="">-- pilih --</option>
  <option value="html">HTML5 dan CSS3</option>
  <option value="js">JavaScript</option>
</select>

<label for="pesan">Pesan</label>
<textarea id="pesan" name="pesan" rows="4"></textarea>

<button type="submit">Kirim</button>
<button type="reset">Kosongkan</button>
<button type="button">Cuma tombol</button>

• <select> membuat dropdown. Yang dikirim adalah value dari <option> terpilih. Gabungkan opsi kosong value="" dengan required untuk memaksa pengguna memilih.
• <textarea> untuk teks panjang. Ia punya tag penutup, dan isi awalnya ditulis di antara tag, bukan di atribut value.
• <button> di dalam form defaultnya type="submit". Jadi tombol yang tugasnya hanya membuka popup harus diberi type="button", kalau tidak form akan ikut terkirim.

Saat form dikirim, browser memeriksa setiap kolom berdasarkan tipe dan atributnya. Kalau ada yang tidak valid, pengiriman dibatalkan, kolom pertama yang salah difokuskan, dan muncul pesan bawaan.

Status valid juga bisa dipakai di CSS dan JavaScript:

input:invalid { border-color: crimson; }
input:valid { border-color: seagreen; }

Dengan aturan ini, kolom email berbingkai merah selama isinya belum berformat email, lalu berubah hijau setelah benar. Di JavaScript, form.checkValidity() mengembalikan true atau false.

Satu catatan penting: validasi browser hanya untuk kenyamanan pengguna. Siapa pun bisa mematikannya lewat DevTools atau mengirim request langsung. Server tetap wajib memvalidasi ulang semua data.

• for di label tidak sama persis dengan id input, misalnya beda huruf besar kecil. Label jadi tidak terhubung.
• Lupa atribut name, sehingga data kolom itu tidak ikut terkirim.
• Placeholder dipakai sebagai label.
• Memakai type="number" untuk nomor HP. Angka nol di depan bisa hilang dan muncul tombol naik turun yang aneh. Pakai type="tel".
• Tombol biasa di dalam form tanpa type="button", akhirnya form terkirim saat tombol diklik.
• Mengandalkan validasi browser saja tanpa validasi di server.