Cara Membuat RadioButton dan CheckBox di HTML

Radio Button dan CheckBox di HTML

Pada postingan sebelumnya kita membahas tentang Masukkan/Input berupa text yaitu Cara Mudah Membuat Form dan tipe-tipenya di HTML. Nah, untuk kali ini kita akan membahas Radio Button dan CheckBox yang memberikan Input/ Masukkan berupa Pilihan yang dipilih oleh Pengguna. Biasanya Radio Button dan CheckBox sering ditemui saat kita melakukan suatu pendaftaran di sebuah website atau pun lainnya yang memungkinkan kita memberikan suatu pilihan. Baiklah, langsung saja kita bahas keduanya dibawah.

1. Radio Button
   Radio Button berfungsi untuk menyatakan pilihan yang bersifat tunggal atau hanya memilih satu pilihan saja. Umumnya seperti pertanyaan Jenis Kelamin, Agama, atau sebagainya. Radio Button dalam HTML digunakan dengan menggunakan elemen input  dengan atribut type yaitu "radio". Untuk atribut name dan value yang biasanya berupa atribut tambahan, dalam pembuatan radio button kedua atribut tersebut wajib digunakan. Karena, atribut name digunakan untuk mengelompokkan radio button menjadi satu, yang berarti atribut name harus memiliki nama yang sama. Sehingga Pengguna hanya bisa memilih satu radio button. Untuk atribut value berfungsi menyimpan nilai yang dikirim ke server.
   Contoh :
   
   <input type="radio" name="gender" value="pria">Pria  <br>
   <input type="radio" name="gender" value="wanita">Wanita
   
   Hasil :
   

   Pria

   Wanita

   
   

   Pada saat kita memilih salah satu Radio Button, pasti kita hanya bisa mengeklik dibagian buletan kecil saja dan tidak dapat memilih melalui label nya. Kita dapat memilih melalui label di sampingnya  dengan cara menggunakan Tag <label>.
   Contoh :

   <label><input type="radio" name="gender" value="pria">Pria </label>  <br>

   <label><input type="radio" name="gender" value="wanita">Wanita </label>
   

   Hasil :
   Pria
   Wanita
2. CheckBox
   
   CheckBox digunakan untuk memilih satu atau beberapa pilihan atau bahkan tidak memilih sama sekali. CheckBox bersifat opsional atau banyak pilihan. Atribut type yang digunakan yaitu "checkbox" dengan elemen input seperti radio button. Jika CheckBox dipilih Pengguna, maka pilihan yang dipilih akan men-check (mencentang).
   Contoh :

   
<input type="checkbox" name="hobi" value="membaca">Membaca  <br>
<input type="checkbox" name="hobi" value="menulis">Menulis  <br>
<input type="checkbox" name="hobi" value="olahraga">Olahraga  <br>
<input type="checkbox" name="hobi" value="memasak">Memasak  <br>
<input type="checkbox" name="hobi" value="menyanyi">Menyanyi  <br>

   

   
   Hasil :
   

   Membaca

   Menulis

   Olahraga

   Memasak

   Menyanyi

   
   

   Sama halnya dengan radio button, checkbox juga bisa dipilih melalui labelnya dengan menggunakan Tag <label>.
   

   
   Contoh :

   <label><input type="checkbox" name="hobi" value="membaca">Membaca </label> <br>
   <label><input type="checkbox" name="hobi" value="menulis">Menulis </label> <br><label><input type="checkbox" name="hobi" value="olahraga">Olahraga </label> <br>
   <label><input type="checkbox" name="hobi" value="memasak">Memasak </label> <br>
   <label><input type="checkbox" name="hobi" value="menyanyi">Menyanyi </label> <br>
   
   

   
   Hasil :
   Membaca
   Menulis
   Olahraga
   Memasak
   Menyanyi

Walaupun dapat memberikan pilihan nilai kepada pengguna, radio button dan checkbox sangat tidak cocok jika digunakan untuk membuat pilihan dengan nilai yang sangat banyak. Seperti contohnya pilihan Negara, Provinsi, dan lainnya yang akan sulit dibaca jika menggunakan radio button maupun checkbox. Oleh karena itu, kita dapat menggunakan Cara Mudah Membuat Dropdown List di HTML untuk mengatasinya.

Demikian postingan saya kali ini, semoga berguna dan bermanfaat bagi kita semua. Kekurangan dan kesalahan saya mohon maaf, dan jika belum paham atau ingin bertanya berikanlah komentar dibawah. Atas kunjungannya saya ucapkan Terima Kasih.