Pilihan Radio Checkbox

1. Radio Buttons

Radio buttons digunakan ketika pengguna hanya bisa memilih satu opsi dari beberapa pilihan yang ada.

Membuat Radio Button

<input type="radio" id="option1" name="gender" value="male">
<label for="option1">Laki-laki</label><br>

<input type="radio" id="option2" name="gender" value="female">
<label for="option2">Perempuan</label><br>
  • type="radio" digunakan untuk membuat radio button.
  • name harus sama untuk radio buttons yang ingin terkait, sehingga hanya satu yang dapat dipilih.
  • id dan for harus sesuai untuk mengaitkan label dengan radio button.
  • value adalah nilai yang akan dikirimkan jika radio button ini dipilih.

2. Checkbox

Checkbox digunakan ketika pengguna dapat memilih satu atau lebih opsi dari beberapa pilihan yang ada.

Membuat Checkbox

<input type="checkbox" id="option1" name="hobby1" value="reading">
<label for="option1">Membaca</label><br>

<input type="checkbox" id="option2" name="hobby2" value="gaming">
<label for="option2">Bermain Game</label><br>
  • type="checkbox" digunakan untuk membuat checkbox.
  • name adalah nama grup yang sama untuk checkbox yang ingin terkait.
  • id dan for harus sesuai untuk mengaitkan label dengan checkbox.
  • value adalah nilai yang akan dikirimkan jika checkbox ini dipilih.

Contoh Penggunaan

<form>
  <p>Pilih jenis kelamin:</p>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Laki-laki</label><br>

  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Perempuan</label><br>

  <p>Pilih hobi (bisa lebih dari satu):</p>
  <input type="checkbox" id="reading" name="hobby" value="reading">
  <label for="reading">Membaca</label><br>

  <input type="checkbox" id="gaming" name="hobby" value="gaming">
  <label for="gaming">Bermain Game</label><br>

  <input type="submit" value="Submit">
</form>

Semoga tutorial ini membantu Anda memahami cara menggunakan elemen Radio dan Checkbox dalam HTML. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya!

PREVIOUS
NEXT