Kita akan kembali melanjutkan tutorial ini untuk melengkapi form kita pada tutorial sebelumnya. Sebuah form registrasi membutuhkan proses validasi persetujuan terhadap syarat dan ketentuan yang berlaku di website kita oleh pengguna website. Dalam hal ini kita harus menambahkan kolom isian ini ke dalam form registrasi website kita. Kita akan mempelajari cara meletakkan kotak ceklis atau yang sering disebut sebagai checkbox di dalam form melalui tutorial HTML – input ceklis.

Tutorial HTML – Input Ceklis – Bagian 15 – 4 (Bahasa Indonesia)

Input ceklis/checkbox merupakan salah satu kolom isian berupa kotak ceklis. Pengguna dapat berinteraksi dengan kolom isian ini, cukup melakukan klik pada kotak ceklis. Input checkbox merupakan salah satu varian dari tag input dan diatur melalui atribut type.

Kita akan masukkan kotak ceklis sebagai kolom persetujuan pada form registrasi. Silahkan perhatikan kode berikut ini:

 

Kode di atas akan menghasilkan tampilan seperti berikut ini:

Tutorial HTML - Ceklist - Checkbox - 1

Penamaan Checkbox

Nama yang diberikan pada atribut name diharuskan unik di dalam sebuah form. Kita tidak dapat menggunakan nama yang sama pada input yang berbeda. Sebagai contoh, bila kita sudah memberikan sebuah tag input checkbox dengan atribut name=”agree” maka kita tidak dapat menambahkan atribut checkbox dengan atribut name yang sama, yaitu name=”agree”. Dalam hal ini kita harus memberikan nama yang unik seperti name=”agree2″ atau nama lain yang belum pernah digunakan di dalam form.

Penamaan Checkbox multi input

Namun, sistem penamaan checkbox adalah unik tapi kita memiliki sebuah trik khusus form yang akan diintegrasikan ke pemrograman server side. Pengalaman saya pribadi, saya sering menggunakan trik ini untuk mengirimkan beberapa checkbox sebagai multi input.

Dalam hal, membuat input checkbox menjadi multi input, kita dapat menambahkan tanda “[]” di akhir nama pada atribut name. Kita ambil contoh pada form registrasi di atas. Kita dapat mengubah atribut name menjadi name=”agree[]”. Dengan menambahkan kurung kotak tertutup, aplikasi peramban akan mengirimkan data ke server dalam bentuk data yang terkompilasi menjadi array. Saya sendiri hanya pernah menguji trik ini menggunakan bahasa pemrograman server side PHP. Data yang dipilih lebih dari 1 kali akan dikirimkan semua tapi dalam bentuk array. Contoh kode HTML:

 

Kode html di atas akan menghasilkan 3 buah kotak ceklis dengan nama agree[] yang dalam bahasa pemrograman akan dikenal sebagai array. Berikut ini adalah hasil tampilannya:

Tutorial HTML - Ceklist - Checkbox - 2

Pilihan Awal

Pada input tulisan kita bisa memasukkan nilai awal. Pada input ceklis kita juga bisa menetapkan kondisi kotak ceklis dalam kondisi tercentang atau tidak. Kita cukup menambahkan sebuah atribut checked tanpa nilai.

Saya akan menetapkan semua kotak ceklis dalam keadaan tercentang ketika halaman form dibuka. Silahkan perhatikan kode HTML berikut ini:

 

Kode setiap pilihan di atas sudah ditambahkan atribut checked, maka semua pilihan akan ditampilkan dalam keadaan tercentang. Berbeda dengan tampilan sebelumnya yang dalam keadaan tidak tercentang. Silahkan perhatikan tampilan dalam keadaan tercentang berikut ini:

Tutorial HTML - Ceklist - Checkbox - 3

Kita selanjutnya akan melanjutkan pembelajaran kita tentang pilihan berganda seperti pada saat mengikuti ujian. Tutorial pilihan berganda akan kita lanjutkan pada tutorial

Tutorial HTML – Input Pilihan – Bagian 15 – 5 (Bahasa Indonesia)