Atribut disabled
Atribut disabled menyekat elemen
borang HTML,
iaitu menjadikannya tidak aktif. Ia merupakan atribut
tanpa nilai.
Penyekatan elemen biasanya diperlukan untuk menghalang pengguna daripada menukar beberapa nilai (yang, walau bagaimanapun, perlu ditunjukkan kepada pengguna dalam bentuk elemen borang). Kadangkala elemen disekat (dan dilepaskan sekatan) menggunakan JavaScript.
Tingkah Laku
Dalam kes butang (button
atau input
dengan atribut type dalam nilai button,
reset atau submit) penyekatan
bermaksud butang tidak boleh ditekan.
Dalam kes medan input teks (input
atau textarea)
teks di dalamnya tidak boleh ditukar atau disalin.
Dalam kes kotak semak
dan radio
keadaannya (ditanda atau tidak) tidak boleh
ditukar. Dalam kes senarai juntai bawah
select
item senarai yang dipilih tidak boleh ditukar.
Elemen yang disekat secara lalai mempunyai latar belakang kelabu. Ia juga tidak akan mengambil bahagian dalam peralihan menggunakan kekunci Tab.
Contoh . Butang Tersekat
Mari kita sekat butang menggunakan atribut
disabled. Sebagai perbandingan, di sebelah adalah contoh
butang yang tidak disekat (cuba tekannya):
<button disabled>teks</button>
<button>teks</button>
:
Contoh . Kotak Semak Tersekat
Sekarang mari kita lihat flag kotak semak yang disekat. Sebagai perbandingan, lihat contoh flag yang tidak disekat di sebelah:
<input type="checkbox" disabled>
<input type="checkbox">
:
Contoh . Kotak Semak Tersekat dan Ditanda
Mari kita lihat bagaimana rupa
flag kotak semak yang disekat
dan ditanda menggunakan atribut checked.
Sebagai perbandingan, lihat contoh
flag bertanda yang tidak disekat di sebelah:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Contoh . Input Teks Tersekat
Sekarang mari kita sekat input. Sebagai perbandingan, lihat contoh input yang tidak disekat di sebelah:
<input type="text" value="teks" disabled>
<input type="text" value="teks">
:
Contoh . Textarea Tersekat
Di sini kita akan melihat textarea yang disekat (perhatikan bahawa saiz textarea yang disekat boleh diubah). Sebagai perbandingan, lihat contoh textarea yang tidak disekat di sebelah:
<textarea disabled>teks</textarea>
<textarea>teks</textarea>
:
Contoh . Senarai Jatuh Bawah Tersekat
Mari kita lihat bagaimana select
yang disekat berfungsi. Sebagai perbandingan, lihat contoh senarai jatuh bawah
yang tidak disekat di sebelah:
<select disabled>
<option>bandar1</option>
<option selected>bandar2</option>
<option>bandar3</option>
<option>bandar4</option>
</select>
<select>
<option>bandar1</option>
<option selected>bandar2</option>
<option>bandar3</option>
<option>bandar4</option>
</select>
:
