Empat jenis input sebelumnya menerima teks yang diketik bebas oleh pengunjung. Kebutuhan berikutnya berpola lain: kita memberikan daftar pilihan, dan pengunjung cukup memilih — tanpa mengetik apa pun. HTML menyediakan dua kontrol untuk pola ini: checkbox untuk pilihan mandiri yang boleh dipilih lebih dari satu, dan radio untuk kelompok pilihan yang hanya boleh terpilih satu. Chapter ini membedah keduanya beserta atribut checked, value, dan penyebutan singkat fieldset.

Checkbox: Pilihan Mandiri #

input type="checkbox" adalah kotak centang yang berdiri sendiri: setiap kotak punya pertanyaan ya-tidak miliknya, dan pengunjung bebas mencentang sebanyak mungkin kotak. Karena pilihannya hanya dua keadaan, checkbox tidak menampilkan teks isian; keterangan pilihan diserahkan pada label yang menyertainya.

Perilaku pengirimannya perlu kita catat dengan teliti. Checkbox yang tercentang menyumbangkan pasangan name dan value, sedangkan checkbox yang tidak tercentang tidak terkirim sama sekali. Nilai yang dikirim berasal dari atribut value; bila atribut itu tidak ditulis, browser memakai teks bawaan on. Dua kotak berbeda boleh memakai name sama, karena keduanya tetap menjawab pertanyaan masing-masing.

Radio: Pilih Satu dari Grup #

input type="radio" bekerja berkelompok: beberapa radio dengan atribut name yang sama membentuk satu grup, dan memilih satu anggota otomatis melepas pilihan pada anggota lain. Inilah kontrol untuk pertanyaan berpola “pilih satu”, misalnya memilih salah satu paket langganan.

Dua aturan radio menuntut ketelitian. Pertama, atribut value wajib ditulis dan berbeda untuk tiap anggota, karena nilai tersebutlah yang mengidentifikasi pilihan terpilih — radio tidak menampilkan nilai apa pun ke layar. Kedua, bila tidak ada anggota yang terpilih, grup tidak mengirimkan data apa pun; browser tidak menebak pilihan pengunjung.

Atribut checked: Menandai Pilihan Awal #

Atribut checked adalah atribut boolean yang menandai kontrol terpilih sejak halaman dimuat. Cukup kehadirannya yang berarti; penulisan checked tanpa nilai tetap sah, sebagaimana kebiasaan penulisan atribut boolean pada course ini. Untuk radio, satu grup boleh memuat satu anggota ter-checked sebagai pilihan bawaan. Perlu diingat, HTML tidak punya cara menyatakan “sengaja tidak tercentang”: tanpa checked, kontrol terbuka dalam keadaan kosong.

Fieldset dan Legend Sekilas #

Kelompok radio biasanya lebih rapi bila dibungkus elemen fieldset dengan judul legend, seperti <fieldset><legend>Paket</legend>...</fieldset>. Pasangan ini memberi kelompok kontrol sebuah batas visual dan judul yang terbaca pembaca layar. Karena fieldset punya aturan sendiri yang layak dibahas utuh, kita simpan pembahasannya untuk chapter Fieldset dan Legend.

Contoh: Preferensi dan Pilihan Paket #

File berikut memadukan dua checkbox preferensi dan satu grup radio pilihan paket pada langganan kabar Toko Budi. Simpan sebagai form-preferensi.html, lalu buka di browser:

html form-preferensi.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Preferensi dan Pilihan Paket</title>
</head>
<body>
  <h1>Langganan Kabar Toko Budi</h1>
  <form>
    <p>Preferensi pemberitahuan:</p>
    <p>
      <input type="checkbox" id="notif-email" name="notif-email" checked>
      <label for="notif-email">Kabar mingguan lewat email</label>
    </p>
    <p>
      <input type="checkbox" id="notif-sms" name="notif-sms">
      <label for="notif-sms">Info promo lewat SMS</label>
    </p>
    <p>Pilih paket (satu saja):</p>
    <p>
      <input type="radio" id="paket-dasar" name="paket" value="dasar" checked>
      <label for="paket-dasar">Paket Dasar</label>
    </p>
    <p>
      <input type="radio" id="paket-premium" name="paket" value="premium">
      <label for="paket-premium">Paket Premium</label>
    </p>
    <p>
      <input type="submit" value="Simpan">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Dua kotak centang; kotak "Kabar mingguan lewat email"
    tercentang sejak halaman dimuat
  - Dua tombol radio dengan tampilan bulat; "Paket Dasar"
    terpilih sebagai bawaan
  - Memilih "Paket Premium" otomatis melepas "Paket Dasar"
  - Tombol "Simpan" di bagian bawah

Berikut peran setiap bagian kode:

  1. Baris 13-14: checkbox pertama dengan checked, tercentang sejak awal; tanpa value, sehingga nilai terkirimnya on.
  2. Baris 17-18: checkbox kedua tanpa checked; bila dibiarkan kosong, kotak ini tidak menyumbang data saat submit.
  3. Baris 22-23: radio pertama grup paket dengan value="dasar" dan checked sebagai bawaan.
  4. Baris 26-27: radio kedua dengan value="premium"; name="paket" yang sama menjadikan keduanya satu grup.
  5. Label di samping tiap kontrol: setiap kontrol diikuti label dengan asosiasi eksplisit, sehingga klik pada teks pun mengubah pilihan.

Perhatikan juga posisi label: pada checkbox dan radio, label kerap ditulis di samping kontrol, dan urutan kontrol dulu atau label dulu tetap sah selama asosiasi terikat. Chapter berikutnya membahas select, kontrol yang menampung pilihan belasan hingga puluhan opsi tanpa memenuhi halaman.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

form-preferensi.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Preferensi dan Pilihan Paket</title>
</head>
<body>
  <h1>Langganan Kabar Toko Budi</h1>
  <form>
    <p>Preferensi pemberitahuan:</p>
    <p>
      <input type="checkbox" id="notif-email" name="notif-email" checked>
      <label for="notif-email">Kabar mingguan lewat email</label>
    </p>
    <p>
      <input type="checkbox" id="notif-sms" name="notif-sms">
      <label for="notif-sms">Info promo lewat SMS</label>
    </p>
    <p>Pilih paket (satu saja):</p>
    <p>
      <input type="radio" id="paket-dasar" name="paket" value="dasar" checked>
      <label for="paket-dasar">Paket Dasar</label>
    </p>
    <p>
      <input type="radio" id="paket-premium" name="paket" value="premium">
      <label for="paket-premium">Paket Premium</label>
    </p>
    <p>
      <input type="submit" value="Simpan">
    </p>
  </form>
</body>
</html>