Atribuut disabled
Atribuut disabled blokeerib HTML
vormi elemendi,
see tähendab, teeb selle mitteaktiivseks. On väärtuseta atribuut.
Elementide blokeerimine on tavaliselt vajalik selleks, et keelata kasutajal muuta mõningaid väärtusi (mis siiski peaksid olema käsilelementidena kasutajale näidatud). Mõnikord blokeeritakse elemendid (ja eemaldatakse blokeering) JavaScripti abil.
Käitumine
Nupu puhul (button
või input
atribuudiga type väärtustel button,
reset või submit) tähendab blokeerimine
seda, et nuppu ei saa vajutada.
Tekstilise sisestusvälja puhul (input
või textarea)
ei saa selles teksti muuta ega kopeerida.
Märkeruutude
ja raadionuppude
puhul ei saa nende olemust (märgitud või mitte)
muuta. Ripmenüüde
select
puhul ei saa valitud loendi punkti muuta.
Blokeeritud element on vaikimisi halli taustaga. See ei osale ka Tab-klahviga liikumises.
Näide . Blokeeritud nupp
Blokeerime nupu atribuudi
disabled abil. Võrdluseks kõrval on näide
mitteblokeeritud nupust (proovige seda vajutada):
<button disabled>text</button>
<button>text</button>
:
Näide . Blokeeritud märkeruut
Vaatame nüüd blokeeritud märkeruudu. Võrdluseks vaatame kõrval mitteblokeeritud märkeruudu näidet:
<input type="checkbox" disabled>
<input type="checkbox">
:
Näide . Blokeeritud ja märgitud märkeruut
Vaatame, kuidas näeb välja blokeeritud
ja atribuudiga checked
märgitud märkeruut. Võrdluseks kõrval
pöördume mitteblokeeritud märgitud märkeruudu näite poole:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Näide . Blokeeritud tekstiväli
Blokeerime nüüd sisestusvälja. Võrdluseks vaatame kõrval mitteblokeeritud sisestusvälja näidet:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Näide . Blokeeritud tekstiala
Siin näeme blokeeritud tekstiala (pange tähele, et blokeeritud textarea suurust saab muuta). Võrdluseks kõrval pöördume mitteblokeeritud tekstiala näite poole:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Näide . Blokeeritud rippmenüü
Vaatame, kuidas töötab blokeeritud
select.
Võrdluseks vaatame kõrval mitteblokeeritud
rippmenüü näidet:
<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>
:
