info-b

Tutorial Form HTML Part 5: Fungsi dan Cara Penggunaan tag input type checkbox HTML

Posted on

Cara pemakaian dan penulisan tag input type=”checkbox” telah kita bahas di panduan Belajar HTML Dasar: Cara Membuat Form di HTML (tag form), namun kali ini kita akan mempelajari beberapa atribut urgen yang sering digunakan bagi tipe input ini.

Beberapa atribut lebih berfungsi selaku persentasi atau mempercantik tampilan dari form, sehingga seandainya sahabat telah menguasai CSS, sebaiknya menggunakan CSS bagi kebutuhan tersebut.


Guna tag input type checkbox pada Penyusunan Form HTML

Tag Input type checkbox berfungsi bagi membangun checkbox atau kotak isian yang diisi dengan cara menceklist kotak tersebut. checkbox lazimnya digunakan bagi alternatif yang dapat dipilih dengan lebih dari 1 alternatif.

Pada pemakaian checkbox HTML, kita hanya memerlukan tag input dengan sebuah atribut type=”checkbox”. Berikut format sederhana checkbox pada HTML:

Checkbox tersebut tak mesti selalu berada di pada tag form HTML, namun seandainya menggunakan checkbox diluar tag form, biasanya dikombinasikan dengan javascript bagi pemrosesannya.


Atribut name: Bagi pemrosesan tag input type checkbox

Atribut urgen seandainya checkbox digunakan di pada tag form yaitu atribut name. Atribut name ini berfungsi selaku penanda nama bagi memproses hasil alternatif form ke pada web server nantinya (misalnya dengan PHP). Berikut yaitu cara penulisan Tag Input type checkbox dengan atribut name:

Atribut name bagi checkbox tak mesti unik, dan sahabat dapat menggunakan nama yang sama bagi beberapa checkbox. Hasil akhirnya akan menjadi variabel array di pada PHP.


Atribut Value: Selaku Nilai Pemrosesan checkbox

Atribut value bagi checkbox bermanfaat di ketika pemrosesan form oleh web server. Misalnya pada bahasa  PHP, nilai dari value inilah yang akan diproses. Kamu bebas mengisinya dengan nilai apapun, namun akan lebih mempermudah seandainya diisi dengan nilai yang singkat dan berhubungan dengan isi dari checkbox itu sendiri.

Berikut contoh pemakaian atribut value:


Atribut Checked: Cara menandai checkbox

Atribut checked digunakan bagi menandai dipilih atau tidaknya checkbox tersebut. Satu-satunya nilai dari atribut checked ini yaitu checked, sehingga penulisannya menjadi: checked = “checked”. Berikut contoh penulisan atribut checked:

Seandainya sahabat menjalankan kode diatas, karenanya di ketika halaman tampil pertama-tama kali, kotak isian checkbox akan terisi seketika. Hal ini dapat digunakan selaku isian defaut bagi form sahabat.


Atribut disabled: Menonaktifkan tag input

Atribut disabled digunakan bagi membangun checkbox tak dapat digunakan. Pemakaian atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah checkbox hanya dapat diisi ketika user telah mengisi objek form lainnya.

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

Atribut disabled akan membangun checkbox berwarna abu-abu dan memberikan tampilan kepada user bahwa checkbox tersebut tak dapat digunakan.


Atribut id dan class: CSS dan Javascript

Selain atribut type, value, checked dan disabled, kita pun dapat menggunakan atribut umum seperti id dan class pada tag input type checkbox. Tag id dan class akan dibutuhkan bagi pemograman HTML menggunakan Javascript dan CSS.


Cara Pemakaian tag input type checkbox pada form HTML

Bagi merangkum pemakaian tag input type checkbox dan juga atribut-atributnya, saya akan membangun contoh kode HTML bagi seluruh atribut yang telah kita pelajari pada panduan ini:

Di contoh terakhir saya menggunakan tag label, tag fieldset dan tag legend yang telah kita pelajari di tutorial form HTML: Fungsi dan Cara Penggunaan Tag Fieldset dan Tag Legend bagi menambah struktur dan mempercantik tampilan form.


Tag input type checkbox yang kita pelajari disini adalah sebuah diantara objek form yang urgen. Checkbox sesuai bagi data form yang membolehkan user memilih lebih dari 1 inputan, namun seandainya sahabat membutuhkan objek form yang memaksa user memilih hanya satu dari beberapa alternatif, HTML menyediakan tag input type radio, yang akan kita bahas di panduan berikutnya.


Sumber https://www.duniailkom.com/