Disabled-attributten
Attributten disabled blokerer et
HTML-formular-element,
hvilket betyder, at det gøres inaktivt. Det er en attribut
uden værdi.
Blokering af elementer er normalt nødvendig for at forhindre brugeren i at ændre visse værdier (som ikke desto mindre skal vises til brugeren i form af formularelementer). Nogle gange blokeres elementer (og blokeringen fjernes) ved hjælp af JavaScript.
Adfærd
I tilfælde af en knap (button
eller input
med attributten type i værdierne button,
reset eller submit) betyder blokering,
at knappen ikke kan klikkes på.
I tilfælde af et tekstindtastningsfelt (input
eller textarea)
kan teksten ikke ændres eller kopieres.
I tilfælde af afkrydsningsfelter
og radio knapper
kan deres tilstand (markeret eller ej) ikke
ændres. I tilfælde af rullelister
select
kan det valgte listepunkt ikke ændres.
Et blokeret element har som standard en grå baggrund. Det deltager heller ikke i overgange med Tab-tasten.
Eksempel . Blokeret knap
Lad os blokere en knap ved hjælp af attributten
disabled. Til sammenligning er der et eksempel
på en ikke-blokeret knap ved siden af (prøv at klikke på den):
<button disabled>text</button>
<button>text</button>
:
Eksempel . Blokeret afkrydsningsfelt
Lad os nu se på et blokeret afkrydsningsfelt. Til sammenligning ser vi på et eksempel på et ikke-blokeret afkrydsningsfelt ved siden af:
<input type="checkbox" disabled>
<input type="checkbox">
:
Eksempel . Blokeret og markeret afkrydsningsfelt
Lad os se på, hvordan et blokeret
og markeret afkrydsningsfelt ser ud ved hjælp af attributten checked.
Til sammenligning ser vi på et eksempel på et ikke-blokeret
markeret afkrydsningsfelt ved siden af:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Eksempel . Blokeret tekstinput
Lad os nu blokere et input-felt. Til sammenligning ser vi på et eksempel på et ikke-blokeret input-felt ved siden af:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Eksempel . Blokeret tekstområde
Her ser vi et blokeret textarea (læg mærke til, at størrelsen på det blokerede textarea kan ændres). Til sammenligning ser vi på et eksempel på et ikke-blokeret tekstområde ved siden af:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Eksempel . Blokeret rulleliste
Lad os se på, hvordan en blokeret
select fungerer.
Til sammenligning ser vi på et eksempel på en ikke-blokeret
rulleliste ved siden af:
<select disabled>
<option>by1</option>
<option selected>by2</option>
<option>by3</option>
<option>by4</option>
</select>
<select>
<option>by1</option>
<option selected>by2</option>
<option>by3</option>
<option>by4</option>
</select>
:
