Gak semua input itu nyentuh keyboard — banyak data yang user pilih dari opsi yang udah disiapin. Mau pilih kota? Dropdown panjang lebih efisien dari ngetik manual. Pilih jenis kelamin? Radio button, cuma satu yang bisa kepilih. Pilih hobi? Checkbox, boleh banyak sekaligus. Tiap kontrol punya use case spesifik — pilih yang salah = UX jelek.

💡 Aturan praktis. Kalau opsi < 5: pakai radio buttons (langsung kelihatan semua). Kalau opsi 5-15: dropdown <select>. Kalau opsi > 15: combobox dengan search/filter. Salah pilih kontrol = user perlu klik 3x lebih banyak buat selesain form sederhana.

Sintaks <select> (Dropdown)

Untuk pilih 1 opsi dari list 5-15 item:

<label for="kota">Kota:</label>
<select id="kota" name="kota">
  <option value="">Pilih kota...</option>
  <option value="jakarta">Jakarta</option>
  <option value="bandung">Bandung</option>
  <option value="surabaya">Surabaya</option>
</select>

Sintaks Radio Button

Untuk memilih 1 dari beberapa opsi yang langsung kelihatan semua. Semua radio dalam satu grup harus punya name yang sama:

<p>Jenis Kelamin:</p>
<label>
  <input type="radio" name="gender" value="pria"> Pria
</label>
<label>
  <input type="radio" name="gender" value="wanita"> Wanita
</label>

Sintaks Checkbox

Untuk memilih beberapa opsi sekaligus:

<p>Hobi:</p>
<label>
  <input type="checkbox" name="hobi" value="coding"> Coding
</label>
<label>
  <input type="checkbox" name="hobi" value="gaming"> Gaming
</label>

Perbedaan utama: radio hanya boleh pilih satu, checkbox boleh pilih banyak.

🎭 Analogi sehari-hari

• <select> = dropdown di formulir paspor (pilih kota dari list panjang).
• Radio button = pilih satu jawaban di kuesioner (Pria/Wanita).
• Checkbox = ceklis daftar belanja (boleh banyak pilihan).

⚠️ Jebakan yang sering ditemui

• Radio butuh name SAMA untuk satu grup — kalau beda, semua bisa dipilih (bukan radio lagi).
• Value yang dikirim = atribut value, bukan teks label. Lupa value = empty submit.
• <select multiple> tampilan beda + butuh ctrl/cmd-click — desktop pattern, susah di mobile. Pertimbangkan checkbox grup.
• <option value="">Pilih...</option> = placeholder pattern (kombinasi dengan required validate kosong).
• Wrap input dalam label = klik label = klik input. Atau pakai for="id" + id di input.
• disabled vs readonly beda: disabled tidak ke-submit, readonly tetap submit + tidak bisa edit.

TL;DR: Pilih kontrol berdasar jumlah opsi: < 5 = radio (langsung kelihatan semua, name SAMA per grup), 5-15 = <select> dropdown, > 15 = combobox + search. Checkbox = boleh banyak pilih. Value yang submit = atribut value, BUKAN teks label — lupa = empty. <option value="">Pilih...</option> + required = placeholder pattern. disabled ≠ readonly: disabled gak ke-submit, readonly submit tapi gak bisa edit.