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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>Tutorial HTML - Form</title> </head> <body> <form> <b>Login Form</b><br /> Username<br /> <input type="text" name="username" /><br /> Password<br /> <input type="password" name="password" /> </form> <br /> <form> <b>Registration Form</b><br /> Username<br /> <input type="text" name="username" value="nama samaran" /><br /> Email<br /> <input type="text" name="email" value="" /><br /> <input type="checkbox" name="agree" value="yes"> Saya sudah membaca, mengerti dan bersedia menaati semua peraturan<br /> </form> </body> </html> |
Kode di atas akan menghasilkan tampilan seperti berikut ini:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Tutorial HTML - Form</title> </head> <body> <form> <b>Registration Form</b><br /> Username<br /> <input type="text" name="username" value="nama samaran" /><br /> Email<br /> <input type="text" name="email" value="" /><br /> <input type="checkbox" name="agree[]" value="yes"> Saya sudah membaca semua peraturan<br /> <input type="checkbox" name="agree[]" value="yes"> Saya sudah mengerti semua peraturan<br /> <input type="checkbox" name="agree[]" value="yes"> Saya bersedia menaati semua peraturan<br /> </form> </body> </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:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Tutorial HTML - Form</title> </head> <body> <form> <b>Registration Form</b><br /> Username<br /> <input type="text" name="username" value="nama samaran" /><br /> Email<br /> <input type="text" name="email" value="" /><br /> <input type="checkbox" name="agree[]" value="yes" checked> Saya sudah membaca semua peraturan<br /> <input type="checkbox" name="agree[]" value="yes" checked> Saya sudah mengerti semua peraturan<br /> <input type="checkbox" name="agree[]" value="yes" checked> Saya bersedia menaati semua peraturan<br /> </form> </body> </html> |
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:
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)
