Atribut disabled
Atribut disabled blokuje prvek
HTML formuláře,
to znamená, že jej činí neaktivním. Jedná se o atribut
bez hodnoty.
Blokování prvků je obvykle potřeba proto, aby bylo zakázáno uživateli měnit některé hodnoty (které přesto musí být uživateli zobrazeny ve formě prvků formuláře). Někdy jsou prvky blokovány (a blokování je odstraněno) pomocí JavaSctipt.
Chování
V případě tlačítka (button
nebo input
s atributem type v hodnotách button,
reset nebo submit) blokování
znamená, že na tlačítko nebude možné kliknout.
V případě textového pole pro vstup (input
nebo textarea)
v něm nebude možné změnit nebo zkopírovat
text. V případě zaškrtávacích polí
a přepínačů
jejich stav (zaškrtnuto nebo ne) nebude možné
změnit. V případě rozbalovacích seznamů
select
nebude možné změnit vybranou položku seznamu.
Zablokovaný prvek má standardně šedé pozadí. Také se nebude účastnit přechodů klávesou Tab.
Příklad . Zablokované tlačítko
Pojďme zablokovat tlačítko pomocí atributu
disabled. Pro srovnání vedle příklad
nezablokovaného tlačítka (zkusme na něj
kliknout):
<button disabled>text</button>
<button>text</button>
:
Příklad . Zablokované zaškrtávací pole
A nyní se podívejme na zablokované zaškrtávací pole. Pro srovnání vedle se podívejme na příklad nezablokovaného zaškrtávacího pole:
<input type="checkbox" disabled>
<input type="checkbox">
:
Příklad . Zablokované a zaškrtnuté zaškrtávací pole
Podívejme se, jak vypadá zablokované
a zaškrtnuté pomocí atributu checked
zaškrtávací pole. Pro srovnání vedle
se podívejme na příklad nezablokovaného
zaškrtnutého zaškrtávacího pole:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Příklad . Zablokované textové vstupní pole
A nyní zablokujme vstupní pole. Pro srovnání vedle se podívejme na příklad nezablokovaného vstupního pole:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Příklad . Zablokované textarea
A zde uvidíme zablokované textarea (všimněte si, že velikost zablokovaného textarea lze měnit). Pro srovnání vedle se podívejme na příklad nezablokovaného textarea:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Příklad . Zablokovaný rozbalovací seznam
Podívejme se, jak funguje zablokovaný
select.
Pro srovnání vedle se podívejme na příklad nezablokovaného
rozbalovacího seznamu:
<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>
:
