Atribut disabled
Atribut disabled memblokir elemen
HTML form,
yaitu membuatnya tidak aktif. Merupakan atribut
tanpa nilai.
Pemblokiran elemen biasanya diperlukan untuk melarang pengguna mengubah beberapa nilai (yang, bagaimanapun, harus ditunjukkan kepada pengguna dalam bentuk elemen form). Terkadang elemen diblokir (dan pemblokiran dilepaskan) dengan menggunakan JavaSctipt.
Perilaku
Dalam kasus tombol (button
atau input
dengan atribut type dalam nilai button,
reset atau submit) pemblokiran
berarti tombol tidak dapat ditekan.
Dalam kasus field input teks (input
atau textarea)
teks di dalamnya tidak dapat diubah
atau disalin. Dalam kasus kotak centang
dan radio
statusnya (dicentang atau tidak) tidak dapat
diubah. Dalam kasus daftar dropdown
select
item terpilih dari daftar tidak dapat diubah.
Elemen yang diblokir secara default memiliki latar belakang abu-abu. Itu juga tidak akan berpartisipasi dalam peralihan dengan tombol Tab.
Contoh . Tombol yang diblokir
Mari blokir tombol dengan atribut
disabled. Sebagai perbandingan, di sampingnya contoh
tombol yang tidak diblokir (coba tekan
itu):
<button disabled>text</button>
<button>text</button>
:
Contoh . Kotak centang yang diblokir
Sekarang mari kita lihat flag kotak centang yang diblokir. Sebagai perbandingan, di sampingnya lihat contoh flag yang tidak diblokir:
<input type="checkbox" disabled>
<input type="checkbox">
:
Contoh . Kotak centang yang diblokir dan dicentang
Mari kita lihat, seperti apa
flag kotak centang yang diblokir
dan dicentang dengan atribut checked.
Sebagai perbandingan, di sampingnya
lihat contoh flag yang dicentang dan tidak diblokir:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Contoh . Input teks yang diblokir
Sekarang mari kita blokir input. Sebagai perbandingan, di sampingnya lihat contoh input yang tidak diblokir:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Contoh . Textarea yang diblokir
Di sini kita akan melihat textarea yang diblokir (perhatikan bahwa ukuran textarea yang diblokir dapat diubah). Sebagai perbandingan, di sampingnya lihat contoh textarea yang tidak diblokir:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Contoh . Daftar dropdown yang diblokir
Mari kita lihat bagaimana
select yang diblokir bekerja.
Sebagai perbandingan, di sampingnya lihat contoh
daftar dropdown yang tidak diblokir:
<select disabled>
<option>city1</option>
<option selected>city2</option>
<option>city3</option>
<option>city4</option>
</select>
<select>
<option>city1</option>
<option selected>city2</option>
<option>city3</option>
<option>city4</option>
</select>
:
