Attributtet disabled
Attributtet disabled blokkerer et
HTML-skjema-element,
det vil si gjør det inaktivt. Det er et attributt
uten verdi.
Blokkering av elementer er vanligvis nødvendig for å forby brukeren fra å endre noen verdier (som likevel må vises til brukeren i form av skjemaelementer). Noen ganger blokkeres elementer (og blokkeringen oppheves) ved hjelp av JavaScript.
Atferd
Ved en knapp (button
eller input
med attributtet type med verdiene button,
reset eller submit) betyr blokkering
at knappen ikke kan klikkes på.
Ved et tekstinndatafelt (input
eller textarea)
kan man ikke endre eller kopiere
teksten. Ved avkrysningsruter
og radioknapper
kan man ikke endre
tilstanden (avmerket eller ikke). Ved rullegardinslister
select
kan man ikke endre det valgte alternativet i listen.
Et blokkert element har som standard en grå bakgrunn. Det vil heller ikke delta i overganger med Tab-tasten.
Eksempel . Blokkert knapp
La oss blokkere en knapp med attributtet
disabled. Til sammenligning er det et eksempel
på en ikke-blokkert knapp i nærheten (prøv å klikke på den):
<button disabled>text</button>
<button>text</button>
:
Eksempel . Blokkert avkrysningsrute
La oss nå se på en blokkert avkrysningsrute. Til sammenligning ser vi på et eksempel på en ikke-blokkert avkrysningsrute i nærheten:
<input type="checkbox" disabled>
<input type="checkbox">
:
Eksempel . Blokkert og avmerket avkrysningsrute
La oss se hvordan en blokkert
og avmerket (ved hjelp av attributtet checked)
avkrysningsrute ser ut. Til sammenligning
viser vi et eksempel på en ikke-blokkert
avmerket avkrysningsrute i nærheten:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Eksempel . Blokkert tekst-input
La oss nå blokkere et input-felt. Til sammenligning ser vi på et eksempel på et ikke-blokkert input-felt i nærheten:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Eksempel . Blokkert textarea
Her ser vi en blokkert textarea (legg merke til at størrelsen på den blokkerte textarea-en kan endres). Til sammenligning viser vi et eksempel på en ikke-blokkert textarea i nærheten:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Eksempel . Blokkert rullegardinliste
La oss se hvordan en blokkert
select
fungerer. Til sammenligning ser vi på et eksempel på en ikke-blokkert
rullegardinliste i nærheten:
<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>
:
