Disabled-attribuutti
Attribuutti disabled estää HTML-lomakkeen elementin,
eli tekee siitä epäaktiivisen. Se on attribuutti ilman arvoa.
Elementtien esto tarvitaan yleensä kieltääkseen käyttäjää muuttamasta joitakin arvoja (jotka kuitenkin on näytettävä käyttäjälle lomakkeen elementtien muodossa). Joskus elementit estetään (ja esto poistetaan) JavaScriptin avulla.
Käyttäytyminen
Painikkeen tapauksessa (button
tai input
attribuutilla type arvoissa button,
reset tai submit) esto
tarkoittaa, että painiketta ei voi painaa.
Tekstisyöttökentän tapauksessa (input
tai textarea)
tekstiä ei voi muuttaa tai kopioida.
Valintaruutujen
ja radio-painikkeiden
tapauksessa niiden tilaa (valittu vai ei) ei voi muuttaa.
Pudotusvalikoiden
select
tapauksessa valittua listan kohdetta ei voi vaihtaa.
Estetty elementti on oletusarvoisesti harmaalla taustalla. Se ei myöskään osallistu Tab-näppäimellä siirtymiseen.
Esimerkki . Estetty painike
Estetään painike attribuutilla
disabled. Vertailun vuoksi vieressä esimerkki
estämättömästä painikkeesta (yritetään painaa sitä):
<button disabled>teksti</button>
<button>teksti</button>
:
Esimerkki . Estetty valintaruutu
Katsotaan nyt estettyä valintaruutua. Vertailun vuoksi vieressä katsomme esimerkkiä estämättömästä valintaruudusta:
<input type="checkbox" disabled>
<input type="checkbox">
:
Esimerkki . Estetty ja valittu valintaruutu
Katsotaan miltä estetty
ja attribuutilla checked valittu
valintaruutu näyttää. Vertailun vuoksi vieressä
käännytään esimerkkiin estämättömästä valitusta valintaruudusta:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Esimerkki . Estetty tekstisyöttökenttä
Estetään nyt input-kenttä. Vertailun vuoksi vieressä katsomme esimerkkiä estämättömästä input-kentästä:
<input type="text" value="teksti" disabled>
<input type="text" value="teksti">
:
Esimerkki . Estetty textarea
Täällä näemme estetyn textarea-kentän (huomaa, että estetyn textarean kokoa voi muuttaa). Vertailun vuoksi vieressä käännytään esimerkkiin estämättömästä textareasta:
<textarea disabled>teksti</textarea>
<textarea>teksti</textarea>
:
Esimerkki . Estetty pudotusvalikko
Katsotaan kuinka estetty
select toimii.
Vertailun vuoksi vieressä katsomme esimerkkiä estämättömästä
pudotusvalikosta:
<select disabled>
<option>kaupunki1</option>
<option selected>kaupunki2</option>
<option>kaupunki3</option>
<option>kaupunki4</option>
</select>
<select>
<option>kaupunki1</option>
<option selected>kaupunki2</option>
<option>kaupunki3</option>
<option>kaupunki4</option>
</select>
:
