Sekelompok atribut bekerja seperti saklar: cukup hadir untuk menyatakan aktif, dan tidak ditulis berarti tidak aktif. Atribut seperti ini disebut atribut boolean. Kita telah bertemu required dan disabled pada Section Pengenalan; sekarang aturan lengkapnya dibedah — termasuk satu jebakan yang sering mengecoh pemula.
Kehadiran Menentukan Nilai #
Mekanisme atribut boolean sederhana namun tegas: nilainya ditentukan oleh keberadaan atribut, bukan oleh isi nilainya. Parser hanya memeriksa ada atau tidaknya nama atribut pada tag. Karena itu, tiga bentuk berikut sama-sama menyatakan kondisi aktif:
<button type="button" disabled>Tombol A</button>
<button type="button" disabled="">Tombol B</button>
<button type="button" disabled="disabled">Tombol C</button>Hasil Render: ketiga tombol tampil redup dan tidak bisa diklik — perilakunya identik.
Mari kita telaah ketiga barisnya:
- Baris 1 (
disabled): bentuk konvensi — nama saja, tanpa nilai. - Baris 2 (
disabled=""): nilai berupa teks kosong — atribut tetap dianggap hadir. - Baris 3 (
disabled="disabled"): bentuk nama=“nama” — masih dianggap hadir dan aktif.
Pilih bentuk pertama untuk kode sehari-hari; bentuk ketiga kadang muncul pada sistem templat lama dan tetap sah.
Atribut Boolean yang Sering Dipakai #
Daftar berikut memuat atribut boolean yang paling sering kita tulis beserta elemen khasnya:
| Atribut | Elemen khas | Efek |
|---|---|---|
disabled | input, button, select | elemen tidak aktif |
required | input, select, textarea | isian wajib sebelum form dikirim |
checked | input (checkbox, radio) | terpilih sejak awal |
readonly | input, textarea | nilai hanya bisa dibaca |
hidden | semua elemen | elemen disembunyikan |
autofocus | input, button | fokus otomatis saat halaman dibuka |
multiple | select, input file | boleh memilih lebih dari satu |
novalidate | form | validasi bawaan browser dimatikan |
autoplay | video, audio | media diputar otomatis |
controls | video, audio | tombol kendali pemutar tampil |
Perilaku tiap atribut dibahas pada section masing-masing (forms, media, dan seterusnya); yang penting di sini adalah pola penulisannya.
Jebakan: disabled=“false” #
Bentuk berikut tampak seperti tombol aktif, tetapi kenyataannya sebaliknya:
<button type="button" disabled="false">Kirim</button>Atribut disabled hadir pada tag — dan kehadiran saja sudah cukup untuk menyatakan benar (true). Nilai "false" tidak pernah dibaca sebagai logika salah; tombol di atas tetap tidak aktif. Jadi nilai seperti "false", "tidak", atau "0" tidak menonaktifkan apa pun.
Menonaktifkan Efek #
Karena hanya kehadiran yang berarti, menonaktifkan dilakukan dengan menghapus atributnya:
<button type="button">Kirim</button>Tombol di atas aktif normal karena disabled tidak ditulis sama sekali. Dalam JavaScript, penambahan dan penghapusan dilakukan lewat setAttribute("disabled", "") dan removeAttribute("disabled") — dua operasi tersebut yang mengatur kehadiran atribut, bukan pergantian nilainya.
Ringkasan #
- Atribut boolean: hadir = true, tidak ditulis = false.
disabled,disabled="", dandisabled="disabled"berarti sama.disabled="false"tetap berarti aktif — nilai tidak dibaca.- Menonaktifkan efek = menghapus atributnya.
Chapter berikutnya membahas atribut title — keterangan tambahan yang muncul sebagai tooltip, lengkap dengan batas-batas aksesibilitasnya.