1. Checkbox

Checkbox digunakan ketika Anda ingin memberikan pilihan yang bisa dipilih lebih dari satu oleh pengguna. Ini memungkinkan pengguna untuk memilih beberapa opsi sekaligus.

Struktur HTML Checkbox:

<input type="checkbox" name="nama" value="nilai">

• <input>: Ini adalah elemen HTML untuk membuat input form.

• type="checkbox": Menentukan bahwa input ini adalah checkbox.

• name="nama": Atribut name digunakan untuk memberikan identitas yang sama pada elemen checkbox yang memiliki kelompok atau kategori yang sama. Jika Anda memiliki banyak checkbox dengan kategori yang sama, atribut name memudahkan server untuk menerima data yang dikirim dalam satu kelompok.

• value="nilai": Nilai ini akan dikirim ke server ketika checkbox tersebut dicentang (dipilih). Jika checkbox tersebut tidak dicentang, maka nilai ini tidak akan terkirim.

Contoh Penggunaan Checkbox:

<form>
    <label>
        <input type="checkbox" name="hobi" value="membaca"> Membaca
    </label><br>
    <label>
        <input type="checkbox" name="hobi" value="bersepeda"> Bersepeda
    </label><br>
    <label>
        <input type="checkbox" name="hobi" value="memasak"> Memasak
    </label><br>
    <label>
        <input type="checkbox" name="hobi" value="berlari"> Berlari
    </label><br>
</form>

Penjelasan lebih lanjut:

• Dalam contoh di atas, ada 4 checkbox yang masing-masing mewakili hobi yang berbeda.

• Pengguna dapat mencentang lebih dari satu hobi, dan nilai yang akan dikirim ke server adalah "membaca", "bersepeda", "memasak", dan/atau "berlari" tergantung pada pilihan pengguna.

• Misalnya, jika pengguna memilih "Membaca" dan "Bersepeda", data yang dikirim ke server bisa berupa hobi=membaca&hobi=bersepeda.

Checkbox vs Multiple Selections:

• Checkbox memungkinkan pengguna memilih beberapa pilihan sekaligus. Jika pengguna memilih lebih dari satu pilihan, server akan menerima data untuk setiap pilihan yang dicentang.

• Pengguna dapat memilih satu atau lebih opsi yang tersedia.

2. Radio Button

Radio button digunakan untuk memilih hanya satu opsi dari beberapa pilihan yang ada. Hanya satu radio button yang bisa dipilih dalam satu grup.

Struktur HTML Radio Button:

<input type="radio" name="nama" value="nilai">

• <input>: Elemen HTML untuk input.

• type="radio": Menandakan bahwa elemen ini adalah radio button.

• name="nama": Atribut name digunakan untuk mengelompokkan beberapa radio button yang saling berhubungan. Jika radio button memiliki nama yang sama, hanya satu radio button dalam grup tersebut yang dapat dipilih.

• value="nilai": Nilai yang akan dikirim ketika radio button dipilih.

Contoh Penggunaan Radio Button:

<form>
    <label>
        <input type="radio" name="jenis_kelamin" value="pria"> Pria
    </label><br>
    <label>
        <input type="radio" name="jenis_kelamin" value="wanita"> Wanita
    </label><br>
    <label>
        <input type="radio" name="jenis_kelamin" value="lainnya"> Lainnya
    </label><br>
</form>

Penjelasan lebih lanjut:

• Dalam contoh ini, terdapat tiga radio button yang memungkinkan pengguna memilih jenis kelamin.

• name="jenis_kelamin" menunjukkan bahwa semua radio button ini termasuk dalam grup yang sama, yaitu grup jenis kelamin. Hanya satu dari ketiganya yang dapat dipilih.

• Ketika pengguna memilih radio button "Pria", nilai yang dikirim adalah jenis_kelamin=pria. Jika memilih "Wanita", nilai yang dikirim adalah jenis_kelamin=wanita.

• Radio button tidak memungkinkan memilih lebih dari satu pilihan pada saat yang sama dalam satu grup.

Radio Button vs Single Selection:

• Radio button memastikan hanya satu pilihan yang dapat dipilih dalam satu grup. Jika pengguna memilih opsi baru, opsi sebelumnya akan otomatis dibatalkan.

• Pengguna hanya dapat memilih satu opsi dari pilihan yang tersedia, sehingga sering digunakan ketika ada beberapa pilihan yang saling eksklusif.

Contoh Kombinasi Checkbox dan Radio Button

Terkadang, Anda akan melihat checkbox dan radio button digabungkan dalam form yang sama. Misalnya, pada form yang memungkinkan pengguna memilih beberapa preferensi dengan radio button untuk memilih satu opsi utama, dan checkbox untuk memilih opsi tambahan.

<form>
    <h3>Jenis Kelamin:</h3>
    <label>
        <input type="radio" name="jenis_kelamin" value="pria"> Pria
    </label><br>
    <label>
        <input type="radio" name="jenis_kelamin" value="wanita"> Wanita
    </label><br>
    
    <h3>Hobi:</h3>
    <label>
        <input type="checkbox" name="hobi" value="membaca"> Membaca
    </label><br>
    <label>
        <input type="checkbox" name="hobi" value="bersepeda"> Bersepeda
    </label><br>
    <label>
        <input type="checkbox" name="hobi" value="memasak"> Memasak
    </label><br>
</form>

berikut hasil jika ditampilkan di browser

Kesimpulan:

• Checkbox digunakan untuk memilih lebih dari satu opsi dalam sebuah form.

• Radio Button digunakan untuk memilih satu opsi dari beberapa pilihan yang tersedia.

• Pastikan memilih jenis elemen yang sesuai dengan kebutuhan interaksi pengguna.