Logo Komodo Koding /Koding

Input Checkbox di HTML

Membuat daftar periksa alias centang yang bisa di aktif dan non aktifkan, bisa dengan checkbox di HTML

Gunakan tag checkbox untuk membuat pengguna bisa memilih satu atau beberapa pilihan yang bisa di aktif dan non-aktifkan dengan sebuah tanda centang.

Contoh kode checkbox

<input type="checkbox" id="terms">
<label for="terms"> Setuju dengan syarat </label>

Yang menghasilkan:

Kamu bisa klik kotak putih atau tulisan di sampingnya, untuk menampilkan tanda centang

Membuat tulisan bisa diklik

Kotak centang biasanya berukuran kecil, karena itu untuk memudahkan pengguna, cobalah untuk membuat tulisannya bisa diklik juga. Di HTML kita bisa menyambungkan label(tulisan) dengan inputnya lewat atrubut for dan id

Atribut for pada label harus bernilai sama dengan atribut id pada input type checkboxnya.

Membuat lebih dari satu centang

Kita bisa menampilkan lebih dari satu checkbox dengan menggunakan kode yang sama beberapa kali

<input type="checkbox" id="terms">
<label for="terms"> Setuju dengan syarat </label>

<br>
<input type="checkbox" id="risk">
<label for="risk"> Setuju dengan resiko </label>

Yang menghasilkan:


🧐 Penting!

Jika punya lebih dari satu checkbox, pastikan mereka punya nilai `for` yang berbeda