Pilihan topping tidak saling meniadakan: pengguna boleh memakai susu oat dan cokelat sekaligus, atau tidak memakai keduanya. Untuk pilihan model ini, HTML menyediakan type="checkbox" — kotak centang yang tiap-tiapnya berdiri sendiri, tercentang atau tidak, tanpa peduli tetangganya.

Kotak kecil ini menyimpan satu kejutan perilaku yang membedakannya dari semua kontrol lain: nilai yang tak dicentang tidak terkirim sama sekali — bukan terkirim kosong, bukan terkirim “tidak”. Aturan kecil ini berakibat besar di sisi server.

Kotak Centang yang Saling Mandiri #

Aturannya: satu input type="checkbox" adalah satu keputusan biner — dicentang atau tidak. Atribut checked pada markup membuat kotak tercentang sejak halaman dibuka. Mekanismenya: saat form dikirim, hanya kotak yang sedang tercentang yang menyumbang pasangan name=value; sisanya seolah tidak pernah ada.

Perilaku required pada checkbox juga khas: yang diperiksa bukan isian, melainkan keadaan tercentang — pasangan persetujuan sebelum data boleh berangkat.

Beberapa Kotak, Satu name #

Beberapa checkbox dengan atribut name yang sama membentuk daftar nilai berulang. Tiga kotak bernama topping menghasilkan nol sampai tiga pasangan topping=... — sesuai jumlah yang dicentang. Nilai pembedanya diletakkan pada atribut value masing-masing kotak.

Contoh: Pilihan Topping #

html 
<form action="/pesan" method="post">
  <p>Topping tambahan:</p>
  <input type="checkbox" id="susu-oat" name="topping" value="susu-oat" checked>
  <label for="susu-oat">Susu oat</label>
  <input type="checkbox" id="cokelat" name="topping" value="cokelat">
  <label for="cokelat">Cokelat</label>
  <input type="checkbox" id="keju" name="topping" value="keju">
  <label for="keju">Keju</label>
  <p>
    <input type="checkbox" id="setuju" name="setuju" value="ya" required>
    <label for="setuju">Saya setuju dengan ketentuan kelas</label>
  </p>
  <button type="submit">Pesan</button>
</form>

Data yang terkirim bila susu oat dibiarkan tercentang, keju tak dicentang, dan persetujuan dicentang:

text 
topping=susu-oat&setuju=ya

Demo berikut memakai dua kotak topping — klik teksnya, bukan kotak kecilnya: seluruh label yang bergaris adalah area centang. Centang keduanya lalu tekan Pesan; lepas satu centang dan kirim lagi untuk melihat pasangannya ikut hilang.

Query yang tampil memuat hanya kotak yang sedang tercentang — dua kotak dicentang berarti dua pasangan topping, satu kotak lepas berarti pasangannya tidak hadir sama sekali. Skrip kecil pada demo menahan perpindahan supaya query tetap terlihat di halaman; pada form sungguhan bertuju https://example.com/pesan, browser membuka alamat itu lengkap dengan query-nya.

Mari kita telaah kode dan hasilnya:

  1. Baris 3–8 (tiga kotak topping): name sama pada ketiganya membentuk daftar — value membedakan anggota daftarnya.
  2. Baris 3 (checked): susu oat tercentang sejak awal; pengguna bebas menghapusnya, dan nilai pun ikut hilang dari kiriman.
  3. Hasil terkirim: cokelat dan keju tak muncul sama sekali — kotak yang tak dicentang tidak menyumbang apa pun, bukan topping= kosong.
  4. Baris 10 (required pada persetujuan): submit ditahan selama kotak persetujuan belum dicentang — pola standar untuk ketentuan layanan.
  5. label dengan for/id: menempelkan teks pada kotaknya — klik pada teks ikut mencentang kotak. Peran label dibahas tuntas pada chapter Label.

Ringkasan #

  • Checkbox = keputusan mandiri: dicentang atau tidak, satu kotak tak peduli kotak lain.
  • Hanya kotak tercentang yang terkirim; yang lain tidak muncul sama sekali.
  • name sama + value berbeda membentuk daftar nilai berulang.
  • checked mengatur keadaan awal; required memaksa persetujuan sebelum submit.

Chapter berikutnya memaksa pilihan tunggal: radio button dan aturan grupnya.