1. Checkbox (type="checkbox"): Pilihan Ganda

Gunakan checkbox jika pengguna diizinkan untuk memilih satu, lebih dari satu, atau tidak memilih sama sekali dari daftar yang disediakan. Data dari setiap kotak yang dicentang akan dikirimkan secara terpisah ke server.

• Logika Pilih: Non-eksklusif.

• Penggunaan Umum: Menyatakan preferensi, hobi, persyaratan yang disetujui, atau item dalam daftar belanja.

• Atribut Kunci :

  • name: Semua checkbox dalam grup yang sama harus memiliki name yang berbeda (atau name yang sama dengan kurung siku name="hobi[]" untuk backend PHP/Laravel).

  • value: Data unik yang dikirim ke server jika kotak dicentang.

• Contoh Kasus: "Pilih hobi Anda: Membaca, Bersepeda, Memancing."

2. Radio Button (type="radio"): Pilihan Tunggal

Gunakan radio button jika pengguna hanya boleh memilih tepat satu dari daftar yang disediakan. Data hanya akan dikirim dari pilihan tunggal tersebut.

• Logika Pilih: Saling eksklusif (Exclusive OR).

• Penggunaan Umum: Menanyakan tingkat pendidikan tertinggi, status perkawinan, atau metode pembayaran.

• Atribut Kunci:

  • name: Wajib sama untuk semua radio button dalam satu grup agar browser tahu mereka saling berkaitan.

  • value: Data unik yang dikirim ke server berdasarkan pilihan tunggal tersebut.

• Contoh Kasus: "Status Pernikahan: Menikah, Belum Menikah, Duda/Janda."

3. Pengelompokan Semantik: Fieldset & Legend

Ini adalah bagian yang paling sering diabaikan, namun sangat penting bagi aksesibilitas (a11y) dan profesionalisme kode Anda.

Tag ini secara visual akan membuat kotak pembungkus di sekitar sekelompok elemen input yang saling berkaitan. Secara semantik, ini memberitahu browser bahwa elemen di dalamnya adalah satu kesatuan topik.

: Judul Kelompok

Tag ini wajib berada di dalam

<form action="/proses-data" method="POST"> <fieldset> <legend>Status Keanggotaanlegend> <label for="reg"> <input type="radio" id="reg" name="status" value="Reguler" required> Reguler label> <br> <label for="prem"> <input type="radio" id="prem" name="status" value="Premium"> Premium label> <br> <label for="inst"> <input type="radio" id="inst" name="status" value="Institusi"> Institusi label> fieldset> <br><br> <fieldset> <legend>Layanan Tambahan (Pilih yang diminati)legend> <label for="buko"> <input type="checkbox" id="buko" name="layanan[]" value="Buku"> Pinjaman Buku Fisik label> <br> <label for="digital"> <input type="checkbox" id="digital" name="layanan[]" value="Digital"> Akses E-Book label> <br> <label for="wks"> <input type="checkbox" id="wks" name="layanan[]" value="Workshop"> Akses Workshop & Pelatihan label> fieldset> <br><br> <button type="submit">Daftar Keanggotaanbutton>
form>