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

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

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

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

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

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

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

Результат:

Lásd még