Kadang pengunjung gak perlu mengetik, cukup memilih dari pilihan yang sudah kamu siapkan. HTML punya tiga alat buat itu: <select> (dropdown, pilih satu dari daftar yang dilipat), radio (bulatan, pilih satu dari beberapa yang kelihatan semua), dan checkbox (kotak centang, boleh pilih lebih dari satu).
🧪 Tebakan cepat: ada dua radio dengan
nameyang berbeda. Bisa gak keduanya dipilih bersamaan? Tebak dulu, jawabannya ada di bagian "Radio: pilih satu dari beberapa".
Dropdown dengan <select>
<form>
<label for="kota">Kota pengiriman</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>
<option value="yogyakarta">Yogyakarta</option>
</select>
</form>
<select>adalah kotak dropdown-nya.idmenyambungkannya ke<label for="kota">, sama kayak<input>, dannameadalah nama datanya waktu form dikirim.- Tiap
<option>adalah satu pilihan, ditulis di dalam<select>, masing-masing dengan</option>sendiri. Jakarta, teks di antara<option>dan</option>, adalah yang dilihat pengunjung.value="jakarta"adalah yang dikirim.- Pilihan pertama,
value="", sengaja kosong sebagai petunjuk.
Hasilnya, kotak bertuliskan "Pilih kota" dengan panah kecil. Pengunjung pilih Bandung, form mengirim kota=bandung: name dan value, bukan teks yang kelihatan. (<option> tanpa value mengirim teksnya.) Dropdown cuma bisa dipilih satu, kecuali diberi atribut multiple: <select multiple>.
Radio: pilih satu dari beberapa
<p>Pengiriman</p>
<label><input type="radio" name="kirim" value="reguler"> Reguler</label>
<label><input type="radio" name="kirim" value="kilat"> Kilat</label>
<label><input type="radio" name="kirim" value="ambil"> Ambil di toko</label>
type="radio"bikin bulatan pilihan.name="kirim"sama persis di ketiganya.nameyang sama inilah yang bikin mereka satu grup: pilih satu, yang lain otomatis lepas.valuebeda di tiap radio, karena itu yang dikirim. Pilih Kilat, form mengirimkirim=kilat.<label>membungkus input dan tulisannya. Cara ini menyambungkan label tanpafordanid: klik tulisan "Kilat", radionya ikut terpilih.
Jawaban tebakan: bisa. Kalau name-nya beda, tiap radio jadi grup sendiri, jadi semuanya bisa dipilih sekaligus.
Checkbox: boleh pilih banyak
<p>Hobi kamu</p>
<label><input type="checkbox" name="hobi" value="coding"> Coding</label>
<label><input type="checkbox" name="hobi" value="olahraga"> Olahraga</label>
type="checkbox"bikin kotak centang. Tiap kotak berdiri sendiri, jadi boleh dicentang lebih dari satu.name="hobi"sama di semua kotak, biar terkirim sebagai satu kelompok jawaban. Centang dua-duanya, form mengirimhobi=codingdanhobi=olahraga.valuebeda di tiap kotak. Tulis persis:value="Coding"danvalue="coding"itu dua nilai yang beda.
Jadi radio cuma bisa satu, checkbox boleh banyak. Dua-duanya butuh name yang sama buat satu grup dan value yang beda buat tiap pilihan, ditulis di dalam tanda kutip: name="hobi", bukan name=hobi.
⚠️ Jebakan yang sering ketemu
- Mengira tulisan di sebelah radio yang dikirim. Yang dikirim
value-nya. Kasih tiap radio dan checkboxvaluesendiri. <option>di luar<select>. Pilihannya gak masuk ke dropdown. Tulis semua<option>sebelum</select>.
TL;DR: <select> berisi <option> buat dropdown, tambah multiple kalau boleh pilih banyak. Radio (type="radio") cuma bisa pilih satu, asal semua radio dalam grup punya name yang sama. Checkbox (type="checkbox") boleh pilih banyak. Yang dikirim adalah pasangan name dan value, bukan teks yang kelihatan, jadi tiap pilihan butuh value-nya sendiri.
