Belajar HTML Part 21 Cara Membuat Checkbox di Form HTML

bySetyo Wibowo ID - 0

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.





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 :





<!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>




semisal kita simpan dengan nama checkbox_html.html, lalu kita buka di browser :





checkbox_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 :





<!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>




terlihat di bagian pilihan pertama yaitu php, saya memberikan attribute checked=’checked’ yang nantinya jika di buka di browser, maka otomatis bagian pilihan php otomatis tercentang.





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 :





<!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>








Attribute id dan class





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.


Tags:

Post a Comment (0)

أحدث أقدم