Belajar Membuat Checkbox di HTML

Membuat Checkbox di HTML – Checkbox adalah salah satu komponen yang ada di html. Checkbox digunakan untuk membuat pilihan beberapa jawaban dari suatu pertanyaan. Bentuk umum dari komponen ini adalah berbentuk persegi yang mana user ketika mengklik maka akan ada simbol check list pada checkbox tersebut sebagai penanda bahwa pilihan tersebut yang dipilih oleh user.

Sebagai info saja sebelumnya saya sudah membagikan cara membuat radio button di html, taukah kalian perbedaan antara komponen checkbox dan radio button ? Jika radio button kita hanya dapat memilih salah satu pilihan jawaban, pada komponen checkbox kita dapat memilih lebih dari satu pilihan jawaban. Contoh misalnya pada daftar hobi, kita pastinya dapat mempunyai lebih dari satu hobi.

Penggunaan Checkbox di HTML

Checkbox dapat kita buat dengan menggunakan tag <input> dengan tipe checkbox. Sintak sederhananya seperti berikut:

<input type="checkbox" name="hobi1" value="Membaca"> Membaca<br>
<input type="checkbox" name="hobi2" value="Sepak Bola"> Sepak Bola<br>
<input type="checkbox" name="hobi3" value="Programming"> Programming<br> 

Berbeda dengan penggunaan radio button yang mana atribut name harus sama, pada komponen checkbox atribut name nya tidak boleh sama. Mengapa demikian karena nilai dari komponen ini bisa lebih dari satu nilai sehingga untuk mengakses nilai dari suatu checkbox harus berdasarkan name yang unik dari checkbox tersebut.

Kalau dilihat pada contoh diatas, kita mempunyai tiga checkbox dengan masing-masing atribut name hobi1, hobi2 dan hobi3. Nantinya kita dapat mengakses masing-masing nilai berdasarkan name tersebut. Nilai yang akan di kirim adalah nilai yang berada pada atribut value.

Artikel Lainnya : Cara membuat Button di html

Teknik penamaan diatas, menurut saya kurang efisien karena kita harus membuat masing-masing name yang berbeda satu persatu. Pertanyaannya bagaimana jika jumlahnya banyak, tentu akan sangat repot untuk membuatnya. Solusi yang paling baik adalah dengan menggunakan array (larik) dengan teknik ini kita hanya langsung membuat dengan format name yang sama lalu diikuti tanda [].

Contohnya atribut name dengan array:

<input type="checkbox" name="hobi[]" value="Membaca"> Membaca<br>
<input type="checkbox" name="hobi[]" value="Sepak Bola"> Sepak Bola<br>
<input type="checkbox" name="hobi[]" value="Programming"> Programming<br> 

Dengan cara ini kita dapat mengidentifikasi nilai checkbox berdasarkan index array yang dipilih. Untuk contoh penggunannya , lihat pada postingan:

Mengenal Atribut Checked dan Disabled

Atribut Checked digunakan untuk menandai checkbox mana yang dipilih (dari sisi programmer bukan user). Penggunaan atribut ini cukup berguna terutama pada halaman edit untuk menampilkan pilihan checkbox yang dipilih.

Contoh:

<input type="checkbox" name="hobi[]" value="Membaca" checked> Membaca<br>
<input type="checkbox" name="hobi[]" value="Sepak Bola"> Sepak Bola<br>
<input type="checkbox" name="hobi[]" value="Programming"> Programming<br> 

Atribut disabled digunakan untuk menonaktifkan checkbox agar tidak dapat dilipilih oleh user. Dalam beberapa kasus kita pasti akan menggunakan atribut ini.

Contoh:

<input type="checkbox" name="hobi[]" value="Membaca" disabled> Membaca<br>
<input type="checkbox" name="hobi[]" value="Sepak Bola"> Sepak Bola<br>
<input type="checkbox" name="hobi[]" value="Programming"> Programming<br> 

Demikian artikel mengenai cara membuat checkbox di html. Dengan artikel ini kita sudah mempelajari membuat checkbox, beserta penggunaan atribut-atributnya. Semoga bermanfaat buat kalian yang baru belajar html.