A disabled attribútum
A disabled attribútum letiltja a HTML
űrlap
elemét, azaz inaktívvá teszi. Érték nélküli attribútum.
Az elemek letiltása általában azért szükséges, hogy megtiltsuk a felhasználónak bizonyos értékek megváltoztatását (amelyek azonban így is megjelenjenek a felhasználó számára űrlapelemek formájában). Néha az elemeket JavaScript segítségével tiltják le (és oldják fel a tiltást).
Viselkedés
Gomb esetén (button
vagy input
a type attribútum button,
reset vagy submit értékeinél)
a letiltás azt jelenti, hogy a gombra nem
lehet kattintani. Szöveges beviteli mező
esetén (input
vagy textarea)
a szöveget nem lehet megváltoztatni vagy
másolni. Jelölőnégyzetek
és választógombok
esetén azok állapotát (bejelölt vagy nem)
nem lehet megváltoztatni. Legördülő listák
select
esetén nem lehet megváltoztatni a kiválasztott
listaelemet.
Egy letiltott elem alapértelmezetten szürke háttérrel jelenik meg. Az elem nem vesz részt a Tab billentyűvel történő navigációban sem.
Példa . Letiltott gomb
Tiltsuk le a gombot a disabled attribútum
segítségével. Összehasonlításképpen egy nem
letiltott gomb példája látható mellette
(próbáljunk rá kattintani):
<button disabled>szöveg</button>
<button>szöveg</button>
:
Példa . Letiltott jelölőnégyzet
Most nézzük meg a letiltott jelölőnégyzetet. Összehasonlításképpen mellette egy nem letiltott jelölőnégyzet példája látható:
<input type="checkbox" disabled>
<input type="checkbox">
:
Példa . Letiltott és bejelölt jelölőnégyzet
Nézzük meg, hogyan néz ki egy letiltott és
a checked
attribútummal bejelölt jelölőnégyzet. Összehasonlításképpen
mellette egy nem letiltott, bejelölt jelölőnégyzet
példája látható:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Példa . Letiltott szöveges input
Most tiltsunk le egy input mezőt. Összehasonlításképpen mellette egy nem letiltott input példája látható:
<input type="text" value="szöveg" disabled>
<input type="text" value="szöveg">
:
Példa . Letiltott textarea
Itt egy letiltott textarea látható (figyeljük meg, hogy a letiltott textarea méretet változtathatjuk). Összehasonlításképpen mellette egy nem letiltott textarea példája látható:
<textarea disabled>szöveg</textarea>
<textarea>szöveg</textarea>
:
Példa . Letiltott legördülő lista
Nézzük meg, hogyan működik a letiltott
select.
Összehasonlításképpen mellette egy nem letiltott
legördülő lista példája látható:
<select disabled>
<option>város1</option>
<option selected>város2</option>
<option>város3</option>
<option>város4</option>
</select>
<select>
<option>város1</option>
<option selected>város2</option>
<option>város3</option>
<option>város4</option>
</select>
:
