Gelombang kelas hanya bisa dipilih satu: mendaftar Gelombang 1 berarti tidak mendaftar Gelombang 2. Pilihan yang saling meniadakan seperti ini adalah wilayah type="radio" — tombol pilihan yang bekerja sebagai satu grup dengan satu jawaban.

Nama “radio” diwarisi dari tombol tuning radio lama: menekan satu kanal otomatis melepas kanal lain. HTML meniru perilaku itu dengan aturan yang mengejutkan banyak penulis baru: pengelompokannya ditentukan oleh name, bukan oleh posisi atau tampilan.

Pilih Satu dari Grup #

Aturannya: beberapa input type="radio" yang memakai name sama membentuk satu grup, dan hanya satu anggota grup yang boleh terpilih dalam satu waktu. Mekanismenya: saat sebuah radio dipilih, browser otomatis melepas pilihan radio lain yang berbagi name sama — kita tidak perlu menulis JavaScript apa pun untuk saling melepas itu.

Tiga atribut pelengkapnya:

  • value — membedakan tiap anggota; pasangan name=value yang terkirim mengikuti radio terpilih.
  • checked — menandai pilihan awal; tanpa checked di mana pun, seluruh grup dimulai kosong — keadaan sah, meski memaksa pengguna memilih.
  • disabled — mematikan satu opsi saja tanpa melumpuhkan grupnya.

Contoh: Memilih Gelombang Kelas #

html 
<form action="/daftar" method="post">
  <p>Pilih gelombang kelas:</p>
  <input type="radio" id="gel-1" name="gelombang" value="gelombang-1">
  <label for="gel-1">Gelombang 1 — Juli 2026</label>
  <input type="radio" id="gel-2" name="gelombang" value="gelombang-2" checked>
  <label for="gel-2">Gelombang 2 — Agustus 2026</label>
  <input type="radio" id="gel-3" name="gelombang" value="gelombang-3" disabled>
  <label for="gel-3">Gelombang 3 — September (penuh)</label>
  <button type="submit">Daftar</button>
</form>

Data yang terkirim saat form dibuka dan langsung dikirim:

text 
gelombang=gelombang-2

Klik ketiga opsi bergantian pada demo — memilih satu otomatis melepas pilihan lain: itulah kerja name yang sama, tanpa satu baris JavaScript. Gelombang 3 tampil redup dan tak bisa diklik karena disabled; tekan Daftar untuk melihat pasangan dari radio yang sedang aktif.

Pada demo, action diarahkan ke https://example.com/daftar — domain cadangan resmi — dan skrip kecil menahan perpindahan supaya pasangan name=value yang terkirim terlihat di halaman, persis kiriman yang diterima server; markup formnya sama persis dengan contoh di atas.

Mari kita telaah kode dan hasilnya:

  1. Baris 3–7 (name="gelombang" pada ketiganya): ketiga radio adalah satu grup — memilih yang satu melepas yang lain secara otomatis.
  2. Baris 5 (checked): Gelombang 2 terpilih sejak awal — satu-satunya cara memberi jawaban awal; satu grup cukup satu checked.
  3. Baris 7 (disabled): Gelombang 3 tampil redup dan tak bisa dipilih — opsinya tetap terbaca, penuhnya tetap diumumkan, pendaftarannya ditutup.
  4. Hasil terkirim: hanya pasangan dari radio terpilih — value="gelombang-2" menjadi nilai, name menjadi kunci.
  5. label dengan for/id: teks opsi ikut bisa diklik — wilayah sentuh yang lega, terutama di ponsel.

Kesalahan Klasik: name Berbeda #

Contoh berikut tampak wajar di layar — tiga radio, satu baris — tapi perilakunya rusak:

html 
<input type="radio" id="g1" name="gelombang-satu" value="gelombang-1">
<label for="g1">Gelombang 1</label>
<input type="radio" id="g2" name="gelombang-dua" value="gelombang-2">
<label for="g2">Gelombang 2</label>

Kedua radio memakai name berbeda — gelombang-satu dan gelombang-dua — sehingga keduanya adalah dua grup terpisah. Akibatnya: keduanya bisa terpilih bersamaan, dan data terkirim dua pasangan sekaligus. Ingat, pengelompokan radio ditentukan name yang sama, bukan letak bersebelahan dan bukan tampilan yang mirip.

Ringkasan #

  • Radio = pilih tepat satu; anggota grup dibentuk oleh name yang sama.
  • value membedakan anggota; checked memberi pilihan awal; disabled menutup satu opsi.
  • Tanpa checked, grup dimulai kosong — sah, dan mengarahkan pengguna untuk memilih.
  • name beda = grup beda: radio tampil berdampingan namun tak saling melepas.

Chapter berikutnya menyusun pilihan dalam daftar turun: select beserta option dan optgroup.