Kotak centang adalah elemen yang sangat diperlukan dalam formulir web, terutama ketika harus menawarkan opsi keikutsertaan kepada pengguna, seperti menerima syarat dan ketentuan atau berlangganan buletin. Dalam panduan ini, saya akan melihat aspek dasar kotak centang , menjelaskan cara kerjanya, dan memberi Anda petunjuk langkah demi langkah tentang cara menggunakan kotak centang di formulir Anda.
Kotak centang tidak hanya memungkinkan pilihan ya/tidak yang sederhana, tetapi juga dapat digunakan dalam kombinasi dengan kontrol formulir lainnya. Panduan ini akan memberi Anda pengetahuan yang Anda butuhkan untuk menerapkan dan menggunakan kotak centang dengan benar.
Temuan utama
- Kotak centang adalah alat yang ideal untuk keputusan biner dalam formulir.
- Jika kotak centang tidak dicentang, maka data tidak akan dikirimkan.
- Nilai default dari kotak centang yang tidak dicentang dianggap kosong.
- Anda dapat membuat kotak centang dicentang secara default dengan menggunakan atribut 'dicentang'.
- Memahami cara kerja kotak centang sangat penting untuk penanganan data formulir yang benar.
Panduan langkah demi langkah
Langkah 1: Membuat kotak centang
Mulailah dengan membuat kotak centang di HTML. Anda akan membutuhkan atribut type="checkbox" dan properti nama untuk setiap kotak centang untuk mengidentifikasi nilainya saat mengirimkan formulir.
Dalam contoh ini, kita membuat dua kotak centang: satu untuk menyetujui syarat dan ketentuan dan satu lagi untuk menerima buletin. Kedua kotak centang tersebut diidentifikasi dengan nama "menerima TNC" dan "menerima buletin".
Langkah 2: Siapkan formulir
Siapkan formulir Anda menggunakan metode GET atau POST. Dalam contoh ini, kita menggunakan metode GET agar kita dapat melihat pilihan dalam parameter URL.
Berikut ini adalah contoh sederhana formulir dengan kotak centang. Pastikan kotak centang diapit oleh tag <form> agar data dapat diproses dengan benar.
Langkah 3: Periksa data yang dikirimkan
Kirimkan formulir tanpa mencentang kotak centang apa pun. Anda akan melihat bahwa tidak ada yang muncul di URL.
Fitur khusus kotak centang adalah jika tidak dicentang, kotak centang tidak mengirimkan nilai. Ini berarti bahwa mereka tidak muncul dalam parameter URL, yang dalam kasus metode GET membuat entri yang sesuai menjadi kosong.
Langkah 4: Menambahkan nilai ke kotak centang
Aktifkan kotak centang pertama dan kirimkan formulir lagi. Hanya kotak centang yang diaktifkan yang ditampilkan dalam data yang dikirimkan.
Hanya kotak centang yang benar-benar dipilih yang akan dikirimkan. Dalam hal ini, Anda akan melihat nama dan nilai spesifik untuk kotak centang yang diaktifkan dalam data formulir.
Langkah 5: Tentukan nilai default
Untuk mengatur kotak centang sebagai pilihan default, tambahkan atribut yang dicentang ke kotak centang yang sesuai.
Jika Anda menggunakan atribut yang dicentang, kotak centang akan diaktifkan saat halaman dimuat. Hal ini berguna jika Anda ingin opsi tertentu dipilih secara default.
Langkah 6: Memproses masukan pengguna
Ketika pengguna mengirimkan input formulir, periksa nilai kotak centang. Harapkan hanya nama-nama kotak yang dicentang dalam data yang dikirimkan.
Penting untuk memastikan bahwa backend Anda (misalnya, server seperti Node.js dengan Express) dapat merespons dengan tepat terhadap nilai yang kosong atau hilang.
Ringkasan
Dalam panduan ini, Anda telah mempelajari dasar-dasar kotak centang di dalam formulir web. Sekarang Anda telah mengetahui cara membuat kotak centang, memahami cara kerjanya, dan bagaimana Anda dapat memastikan bahwa data dikirimkan dengan benar. Kotak centang menyediakan cara mudah untuk menangkap preferensi pengguna dan harus disertakan dalam setiap formulir web.
