Atribút disabled

Atribút disabled blokuje prvok HTML formulára, to znamená, že ho robí neaktívnym. Je atribútom bez hodnoty.

Blokovanie prvkov zvyčajne slúži na to, aby sa zakázalo používateľovi meniť niektoré hodnoty (ktoré, napriek tomu, musia byť zobrazené používateľovi vo forme prvkov formulára). Niekedy sa prvky blokujú (a odblokúvajú) pomocou JavaSctipt.

Správanie

V prípade tlačidla (button alebo input s atribútom type v hodnotách button, reset alebo submit) blokovanie znamená, že na tlačidlo nebude možné kliknúť. V prípade s textovým poľom na vstup (input alebo textarea) v ňom nebude možné zmeniť alebo kopírovať text. V prípade s checkboxmi a rádií ich stav (zaškrtnuté alebo nie) nebude možné zmeniť. V prípade s rozbaľovacími zoznamami select nebude možné zmeniť vybranú položku zoznamu.

Zablokovaný prvok má predvolene sivé pozadie. Tiež sa nebude zúčastňovať prechodov klávesom Tab.

Príklad . Zablokované tlačidlo

Poďme zablokovať tlačidlo pomocou atribútu disabled. Pre porovnanie vedľa príklad nezablokovaného tlačidla (skúsme naň kliknúť):

html<button disabled>text</button>
<button>text</button>

Результат:

Príklad . Zablokovaný checkbox

A teraz sa pozrime na zablokovaný checkbox. Pre porovnanie vedľa si pozrime príklad nezablokovaného checkboxu:

html<input type="checkbox" disabled>
<input type="checkbox">

Результат:

Príklad . Zablokovaný a zaškrtnutý checkbox

Pozrime sa, ako vyzerá zablokovaný a zaškrtnutý pomocou atribútu checked checkbox. Pre porovnanie vedľa si ukážme príklad nezablokovaného zaškrtnutého checkboxu:

html<input type="checkbox" disabled checked>
<input type="checkbox" checked>

Результат:

Príklad . Zablokovaný textový input

A teraz poďme zablokovať input. Pre porovnanie vedľa si ukážme príklad nezablokovaného inputu:

html<input type="text" value="text" disabled>
<input type="text" value="text">

Результат:

Príklad . Zablokovaný textarea

A tu uvidíme zablokovaný textarea (pozorujeme, že veľkosť zablokovaného textarea je možné meniť). Pre porovnanie vedľa si ukážme príklad nezablokovaného textarea:

html<textarea disabled>text</textarea>
<textarea>text</textarea>

Результат:

Príklad . Zablokovaný rozbaľovací zoznam

Pozrime sa, ako funguje zablokovaný select. Pre porovnanie vedľa si ukážme príklad nezablokovaného rozbaľovacieho zoznamu:

html<select disabled>
  <option>mesto1</option>
  <option selected>mesto2</option>
  <option>mesto3</option>
  <option>mesto4</option>
</select>
<select>
  <option>mesto1</option>
  <option selected>mesto2</option>
  <option>mesto3</option>
  <option>mesto4</option>
</select>

Результат:

Pozrite tiež