Cara Pemakaian dan Fungsi tag input type checkbox di HTML

belajar HTML dan CSS untuk pemula

Cara pemakaian dan penulisan tag input type=”checkbox” sudah kita bahas pada tutorial Cara Membuat Form di HTML (tag form), tetapi saat ini kita akan mempelajari beberapa atribut penting yang biasa dipakai untuk tipe input ini.

Beberapa atribut lebih berguna sebagai persentasi atau mempercantik tampilan dari form, sehingga bila kamu sudah menguasai CSS, disarankan memakai CSS untuk kebutuhan itu.

Fungsi tag input type checkbox dalam Pembuatan Form HTML

Tag Input type checkbox berguna untuk membuat checkbox atau kotak isian yang diisi dengan metode menceklist kotak itu. checkbox sering dipakai untuk pilihan yang bisa dipilih dengan lebih dari 1 pilihan.

Dalam pemakaian checkbox HTML, kita cuma membutuhkan tag input dengan sebuah atribut type=”checkbox”. Berikut format sederhana checkbox dalam HTML:

<input type="checkbox"/>Penjelasan checkbox

Checkbox itu tidak mesti selalu berada di dalam tag form HTML, tetapi bila memakai checkbox diluar tag form, pada umumnya dikombinasikan dengan javascript untuk pemrosesannya.

Atribut name

Atribut penting bila checkbox dipakai di dalam tag form ialah atribut name. Atribut name ini berguna sebagai penanda nama untuk memproses hasil pilihan form ke dalam web server nantinya (contohnya dengan PHP). Berikut ialah cara penulisan Tag Input type checkbox dengan atribut name:

<form>
<input type="checkbox" name="nama_checkbox"/>keterangan checkbox
</form>
Atribut name untuk checkbox tidak mesti unik, dan kamu bisa memakai nama yang sama untuk beberapa checkbox. Hasil akhirnya akan jadi variabel array di dalam PHP.

Atribut Value

Atribut value untuk checkbox berguna di saat pemrosesan form oleh web server. Contohnya dalam bahasa  PHP, nilai dari value inilah yang akan diproses. Kamu bebas mengisinya dengan nilai apapun, tetapi bakal lebih mempermudah bila diisi dengan nilai yang singkat dan berkaitan dengan isi dari checkbox itu sendiri.

Berikut contoh pemakaian atribut value:

<form>
<input type="checkbox" name="hobi" value="HTML"/>belajar HTML
</form>

Atribut Checked: Cara menandai checkbox

Atribut checked dipakai untuk menandai dipilih atau tidaknya checkbox itu. Satu-satunya nilai dari atribut checked ini merupakan checked, sehingga penulisannya jadi: checked = “checked”. Berikut contoh penulisan atribut checked:

<form>
<input type="checkbox" name="hobi" value="HTML" checked ="checked"/>belajar HTML
</form>

Bila kamu menjalankan kode diatas, maka di saat halaman tampil pertama kali, kotak isian checkbox akan terisi langsung. Hal ini dapat dipakai sebagai isian defaut untuk form kamu.

Atribut disabled

Atribut disabled dipakai untuk membuat checkbox tidak dapat dipakai. Pemakaian atribut ini pada umumnya di kombinasikan dengan javascript supaya berfungsi maksimum. Misalnya sebuah checkbox cuma bisa diisi saat user sudah mengisi objek form lainnya.

Atribut disabled ini cuma mempunyai 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya:

<form>
<input type="checkbox" name="hobi" value="HTML" disabled="disabled" />belajar HTML
</form>

Atribut disabled akan membuat checkbox berwarna abu-abu dan memberikan tampilan kepada user bahwa checkbox itu tidak dapat dipakai.

Atribut id dan class

Selain atribut type, value, checked dan disabled, kita juga dapat memakai atribut umum seperti id dan class dalam tag input type checkbox. Tag id dan class akan diperlukan untuk pemograman HTML memakai Javascript dan CSS.

Cara Pemakaian tag input type checkbox dalam form HTML

Untuk merangkum pemakaian tag input type checkbox bersama atribut-atributnya, saya akan membuat contoh kode HTML bagi semua atribut yang sudah kita pelajari dalam tutorial ini:

<!DOCTYPE html>
<html>
 
<head>
<title>Belajar Tag Input Type=checkbox HTML</title>
</head>
<body>
<h4>Belajar tag Input type="checkbox" di infanthree.com:</h4>
<form>
Checkbox dasar : 
<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>

Dalam contoh terakhir saya memakai tag label, tag fieldset dan tag legend yang sudah kita pelajari pada tutorial form HTML: Fungsi dan Cara Pemakaian Tag Fieldset dan Tag Legend untuk menambah struktur dan mempercantik tampilan form.

Tag input type checkbox yang kita pelajari disini adalah salah satu objek form yang penting. Checkbox sesuai bagi data form yang membolehkan user memilih lebih dari 1 inputan, tetapi bila kamu memerlukan objek form yang memaksa user memilih cuma satu dari beberapa opsi, HTML menyediakan tag input type radio, yang akan kita bahas pada tutorial berikutnya.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *