inputcheckboxradioMenengah3 mnt baca

Checkbox dan Radio

Pilihan ganda (checkbox) vs pilihan tunggal (radio): cara kerja name dan checked.

Kenapa Ada Dua: Belajar dari Kuesioner Kertas

Ingat angket atau kuesioner di sekolah. Ada dua jenis pertanyaan: "centang semua ekstrakurikuler yang kamu ikuti" (boleh banyak) dan "lingkari SATU kelas favoritmu" (hanya satu). Kalau panitia memakai simbol yang sama untuk keduanya, hasilnya kacau. HTML memisahkan dua pola ini menjadi checkbox dan radio karena perilaku pilihannya memang beda secara fundamental. Masalah yang dipecahkan: bagaimana browser tahu kapan pengguna boleh memilih banyak dan kapan hanya boleh satu? Jawabannya ada pada kombinasi type dan atribut name yang cerdik: radio dengan name yang sama otomatis saling eksklusif, sedangkan checkbox dengan name yang sama mengumpulkan banyak nilai.

Contoh 1: Hobi dan Jenis Kelamin

html

<form action="/profil" method="post">
  <p>Hobi (boleh banyak):</p>
  <label><input type="checkbox" name="hobi" value="game" /> Game</label>
  <label><input type="checkbox" name="hobi" value="musik" checked /> Musik</label>
  <p>Jenis kelamin (pilih satu):</p>
  <label><input type="radio" name="gender" value="l" /> Laki-laki</label>
  <label><input type="radio" name="gender" value="p" /> Perempuan</label>
  <button type="submit">Simpan</button>
</form>

Checkbox mengirim daftar semua yang dicentang (hobi=game&hobi=musik), radio hanya mengirim satu (gender=l). Atribut checked menandai pilihan yang sudah terpilih sejak halaman dibuka, cocok untuk nilai default atau data lama pengguna.

Contoh 2: Form Pesan Minuman yang Realistis

html

<form action="/pesan" method="post">
  <fieldset>
    <legend>Topping (bebas pilih banyak)</legend>
    <label><input type="checkbox" name="topping" value="boba" checked /> Boba</label>
    <label><input type="checkbox" name="topping" value="jelly" /> Jelly</label>
    <label><input type="checkbox" name="topping" value="keju" /> Keju</label>
  </fieldset>
  <fieldset>
    <legend>Ukuran (pilih satu)</legend>
    <label><input type="radio" name="ukuran" value="s" /> Kecil</label>
    <label><input type="radio" name="ukuran" value="m" checked /> Sedang</label>
    <label><input type="radio" name="ukuran" value="l" /> Besar</label>
  </fieldset>
  <button type="submit">Pesan</button>
</form>

<fieldset> dan <legend> mengelompokkan pilihan secara visual sekaligus semantik, sehingga pembaca layar pun paham mana grup topping dan mana grup ukuran.

Perbandingan Kilat

	Checkbox	Radio
Jumlah pilihan	0, 1, atau banyak	tepat 1
`name` sama artinya	satu grup, kirim banyak nilai	satu grup, kirim satu nilai
Contoh	hobi, topping	metode bayar, ukuran

Kesalahan Umum

1. Memberi name berbeda untuk radio satu grup. Ini jebakan paling umum. Radio hanya saling eksklusif kalau name-nya sama. Beda name berarti grup berbeda, sehingga pengguna bisa memilih semua opsi sekaligus dan logika "pilih satu" jebol.

html

<!-- SALAH: bisa pilih Tunai DAN QRIS sekaligus -->
<input type="radio" name="bayar1" value="tunai" /> Tunai
<input type="radio" name="bayar2" value="qris" /> QRIS

<!-- BENAR: pilih satu, yang lain otomatis lepas -->
<input type="radio" name="bayar" value="tunai" /> Tunai
<input type="radio" name="bayar" value="qris" /> QRIS

2. Lupa atribut value. Checkbox atau radio tanpa value mengirim teks on yang tidak bermakna ke server. Server tidak bisa membedakan opsi mana yang dipilih. Selalu tulis value yang jelas.

3. Teks tidak dibungkus <label>. Tanpa label, pengguna harus mengklik kotak mungilnya tepat sasaran. Di HP ini menyiksa. Bungkus dengan <label> agar seluruh teksnya bisa diklik.

Catatan teknis: Nilai value yang dikirim ke server sebaiknya kode pendek yang stabil (boba, s), bukan teks tampilan yang bisa berubah (Boba Brown Sugar Rp5.000). Teks tampilan boleh diganti kapan saja tanpa merusak data lama.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Form Pesan Makanan

Buat form pesanan: topping sebagai 3 checkbox (name="topping"), ukuran sebagai 3 radio (name="ukuran", satu checked default). Semua dibungkus label. Tantangan ini melatih perbedaan paling sering salah kaprah di form: kapan memakai checkbox dan kapan radio, plus cara mengelompokkan radio dengan name yang sama. Kamu akan memakainya di setiap form survei, pemesanan, dan pengaturan.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Pesan</title>
</head>
<body>
  <h1>Pesan Minuman</h1>
  <form>
    <!-- topping + ukuran di sini -->
  </form>
</body>
</html>

Open Sandbox