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