Belajar HTML Part 21 Cara Membuat Checkbox di Form HTML
Jika dalam tutorial sebelumnya kita telah belajar mengenai bagaimana cara untuk membuat form di HTML, serta membuat inputan text dan inputan password pada form, nah dalam tutorial kali ini kita akan membahas mengenai checkbox di dalam form HTML, baik langsung saja kita akan mulai pembahasannya.
Video Tutorial Belajar HTML – Membuat Checkbox di Form HTML
Checkbox adalah jenis inputan yang cara memilihnya adalah dengan cara mencentang, sehingga memungkinkan user dapat memilih lebih dari satu pilihan.
inputan jenis checkbox ini dapat anda gunakan untuk membuat inputan yang memperbolehkan user memilih lebih dari satu contohnya jenis kemampuan, baik biar anda tidak bingung langsung saja kita coba buat contohnya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Kemampuan Bahasa Pemrogaman ?</p> <p><input type='checkbox' name='bahasa1' value='php' />PHP</p> <p><input type='checkbox' name='bahasa2' value='asp' />ASP</p> <p><input type='checkbox' name='bahasa3' value='jsp' />JSP</p> <input type='submit' name='tombol' value='Kirim' /> </form> </body> </html> |
terlihat ada 3 checkbox, user dapat mencentang pilihan yang ada, gimana mudahkan ?
untuk penjelasan dari skripnya adalah sebagai berikut :
- type=’checkbox’ itu adalah deklarasi agar inputan ini berbentuk checkbox
- attribute name digunakan untuk memberikan nama pada inputan ini ketika nanti inputan form di proses.
- attribute value digunakan untuk memberikan nilai pada inputan sehingga ketika user mencentang maka nilai yang dikirimkan adalah value dari attribute ini.
Attribute checked
Attribute ini digunakan untuk memberikan checklist otomatis pada pilihan yang diinginkan, baik langsung saja contohnya seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Kemampuan Bahasa Pemrogaman ?</p> <p><input type='checkbox' name='bahasa1' value='php' checked='checked' />PHP</p> <p><input type='checkbox' name='bahasa2' value='asp' />ASP</p> <p><input type='checkbox' name='bahasa3' value='jsp' />JSP</p> <input type='submit' name='tombol' value='Kirim' /> </form> </body> </html> |
Attribute disabled
Attribute ini digunakan untuk menonaktifkan fungsi dari inputan ini, attribute ini biasanya akan dipadukan dengan javascript, nah untuk menggunakan attribute ini silahkan anda menambahkan skrip disabled=’disabled’ baik contohnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get" > <p>Kemampuan Bahasa Pemrogaman ?</p> <p><input type='checkbox' name='bahasa1' value='php' disabled='disabled' />PHP</p> <p><input type='checkbox' name='bahasa2' value='asp' />ASP</p> <p><input type='checkbox' name='bahasa3' value='jsp' />JSP</p> <input type='submit' name='tombol' value='Kirim' /> </form> </body> </html> |
pada inputan type checkbox anda juga dapat menggunakan attribute id dan class yang digunakan untuk memanipulasi tampilan dengan css dan javascript.
|
1 |
<p><input type='checkbox' name='bahasa1' value='php' id='abc' class='def' />PHP</p> |
bagaimana mudah kan cara untuk membuat checkbox di dalam HTML, baik sekian dulu pembahasan mengenai bagaimana cara untuk membuat checkbox di form HTML, dalam tutorial selanjutnya kita akan membahas mengenai bagaimana cara untuk membuat radio button di form HTML, baik sampai jumpa di turorial selanjutnya.
[stextbox id=”info”] Anda serius ingin menguasai HTML ?Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]
Anak IT bagus blognya . Apalagi pakwe english wow
bagus blognya
Mantap keren, saya jadi bisa coding.
Thank you gan
ya sama sama gan, semoga dapat membantu
Artikel ini bermanfaat.
Terima kasih.