formselectradioMenengah4 mnt baca

Dropdown, Radio Button, dan Checkbox

Input pilihan: select untuk dropdown, radio untuk satu pilihan, checkbox untuk banyak pilihan. Pahami name yang dikelompokkan.

Tag <select> bikin menu dropdown, tiap pilihan dibungkus <option>:

html
<label for="kota">Kota Asal</label>
<select id="kota" name="kota">
  <option value="">-- Pilih kota --</option>
  <option value="bdg">Bandung</option>
  <option value="jkt">Jakarta</option>
  <option value="sby">Surabaya</option>
</select>

Yang dikirim ke server adalah value dari option yang dipilih, bukan teksnya. Jadi value boleh kode singkat (bdg) sementara teksnya ramah dibaca ("Bandung"). Atribut selected pada salah satu option menjadikannya pilihan awal.

Untuk dropdown yang dikelompokkan, pakai <optgroup>:

html
<select id="makanan" name="makanan">
  <optgroup label="Makanan Berat">
    <option value="nasgor">Nasi Goreng</option>
    <option value="mie">Mie Ayam</option>
  </optgroup>
  <optgroup label="Camilan">
    <option value="cilok">Cilok</option>
    <option value="batagor">Batagor</option>
  </optgroup>
</select>

Radio Button: Pilih Satu

Radio button untuk memilih satu dari beberapa opsi. Kuncinya: semua radio dalam satu grup harus punya name yang sama, tapi value berbeda:

html
<p>Ukuran kaos:</p>
<label><input type="radio" name="ukuran" value="S"> S</label>
<label><input type="radio" name="ukuran" value="M"> M</label>
<label><input type="radio" name="ukuran" value="L"> L</label>

Karena name-nya sama (ukuran), browser otomatis memastikan cuma satu yang bisa dipilih. Di sini label membungkus input langsung, jadi tidak butuh for dan id. Atribut checked menjadikan satu opsi terpilih dari awal.

Checkbox: Pilih Banyak

Checkbox mirip radio, tapi boleh pilih lebih dari satu. Polanya sama, bedanya tiap checkbox biasanya punya name sendiri atau name array:

html
<p>Hobi (boleh pilih banyak):</p>
<label><input type="checkbox" name="hobi" value="ngoding"> Ngoding</label>
<label><input type="checkbox" name="hobi" value="gaming"> Gaming</label>
<label><input type="checkbox" name="hobi" value="musik"> Musik</label>

Catatan teknis: Checkbox yang tidak dicentang tidak mengirim data sama sekali ke server. Jadi di backend, "tidak ada data hobi" artinya tidak ada yang dipilih, bukan error. Ini jebakan umum yang bikin bingung pemula.

Textarea: Input Teks Panjang

Untuk pesan atau komentar yang butuh banyak baris, pakai <textarea>, bukan input:

html
<label for="pesan">Pesan</label>
<textarea id="pesan" name="pesan" rows="4" cols="40" placeholder="Tulis pesanmu di sini..."></textarea>

Atribut rows mengatur tinggi (jumlah baris). Isi awal ditulis di antara tag pembuka dan penutup, bukan di atribut value.

Contoh Form Pendaftaran Lengkap

html
<form>
  <label for="nama">Nama</label>
  <input type="text" id="nama" name="nama">

  <label for="kota">Kota</label>
  <select id="kota" name="kota">
    <option value="bdg">Bandung</option>
    <option value="jkt">Jakarta</option>
  </select>

  <p>Jenis kelamin:</p>
  <label><input type="radio" name="jk" value="L" checked> Laki-laki</label>
  <label><input type="radio" name="jk" value="P"> Perempuan</label>

  <p>Minat:</p>
  <label><input type="checkbox" name="minat" value="web"> Web</label>
  <label><input type="checkbox" name="minat" value="mobile"> Mobile</label>

  <label for="bio">Bio singkat</label>
  <textarea id="bio" name="bio" rows="3"></textarea>

  <button type="submit">Kirim</button>
</form>

Hafalkan polanya: select untuk daftar panjang, radio untuk pilih satu, checkbox untuk pilih banyak.