Fungsi dan Cara Penggunaan Checkbox Pada Form HTML

Checkbox sudah pernah saya singgung didalam tutorial cara membuat form dalam tutorial itu pembahasanya belum lengkap dengan atribut checkbox. didalam tutorial ini saya akan membahas checkbox beserta atribut-atribut checkbox.
checkbox adalah inputan checkbox/ceklist, pengisiannya dengan menceklist.
Type checkbox ini memiliki atribut checked jika diisi dengan nilai checked, akan membuat chexkbox langsung terpilih tanpa harus diceklist terlebih dahulu.

Fungsi Checkbox

tag input type checkbox berfungsi untuk membuat kotak isian berupa pilihan, pilihan disini bisa lebih dari satu. pengisiannya juga sangat mudah dengan cara checklis pilihannya.

Atribut name Checkbox

atribut name sangat penting, atribut name dalam checkbox digunakan untuk keperluan memeroses data. misalnya menyimpan data yang dipilih pada checkbox kedalam database. name ini harus sama dengan name dalam table database.

Atribut Value Checkbox

atribut value pada checkbox berfungsi untuk value dari pilihan. value ini yang akan masuk ke database. lihat contoh dibawah ini

dari contoh script diatas saya membuat valuenya “Musik” data yang tampil pada browser adalah Degarin Musik. ketika saya menyimpan data ke dalam database, yang tersimpan bukan tulisan “dengarin musik” tapi yang tersimpan adalah “Musik”

Atribut Checked Checkbox

atribut checked pada checkbox berfungsi untuk membuat checkbox langsung terceklis pada saat dibuka di browser. nilai atribut ini checked perhatikan contoh dibawah ini

dengan membuat checked maka otomatis musik sudah terceklis pada saat pertama x dibuka.

Atribut disabled

atribut ini digunakan untuk menonaktifkan checkbox, saya jarang menggunakan, karena ini khusus untuk data yang misalnya harus memilih sesuatu baru checkboxnya aktif. saya pakai javascript untuk urusan ini.

Cara Penggunaan Checkbox

<!DOCTYPE html>
<html>
<head>
 <title>Belajar checkbox HTML</title>
</head>
<body>
 <h4>Belajar tag Input type="checkbox" Phpdanmysql.com:</h4>
 <form>
 Checkbox standar :
 <input type="checkbox" name="hobi1" value="HTML"/>belajar HTML
 <br />
 Checkbox + checked :
 <input type="checkbox" name="hobi2" value="HTML" checked="checked"/>
 belajar HTML
 <br />
 Checkbox + disabled :
 <input type="checkbox" name="hobi3" value="HTML" disabled="disabled"/>
 belajar HTML
 <br />
 <br />
 Checkbox + Tag Label + Tag fieldset + Taglegend :
 <fieldset>
 <legend>Hobi</legend>
 <label>
 <input type="checkbox" name="hobi4" value="HTML"/>belajar HTML
 </label>
 <label>
 <input type="checkbox" name="hobi4" value="CSS"/>belajar CSS
 </label>
 <label>
 <input type="checkbox" name="hobi4" value="PHP"/>belajar PHP
 </label>
 </fieldset>
 </form>
</body>
</html>

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas