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):

html<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:

html<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:

html<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:

html<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:

html<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:

html<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>

Результат:

Vaata ka