Atribūts disabled

Atribūts disabled bloķē HTML formas elementu, tas ir, padara to neaktīvu. Ir atribūts bez vērtības.

Elementu bloķēšana parasti ir nepieciešama, lai aizliegtu lietotājam mainīt dažas vērtības (kuras, tomēr, ir jāparāda lietotājam formas elementu veidā). Dažreiz elementus bloķē (un noņem bloķējumu) izmantojot JavaSctipt.

Uzvedība

Pogas gadījumā (button vai input ar atribūtu type vērtībās button, reset vai submit) bloķēšana nozīmē, ka pogu nevarēs nospiest. Teksta ievades lauka gadījumā (input vai textarea) tajā nevarēs mainīt vai kopēt tekstu. Izvēles rūtiņu un radio pogu gadījumā to stāvokli (atzīmēts vai nē) nevarēs mainīt. Nolaižamo sarakstu select gadījumā nevarēs mainīt izvēlēto saraksta punktu.

Pēc noklusējuma bloķētam elementam ir pelēks fons. Tas arī nepiedalīsies pārejās ar Tab taustiņu.

Piemērs . Bloķēta poga

Bloķēsim pogu, izmantojot atribūtu disabled. Salīdzinājumam blakus piemērs nebloķētas pogas (mēģināsim to nospiest):

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

Piemērs . Bloķēta izvēles rūtiņa

Tagad apskatīsim bloķētu izvēles rūtiņas atlasi. Salīdzinājumam blakus skatāmies uz nebloķētas atzīmes piemēru:

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

Piemērs . Bloķēta un atzīmēta izvēles rūtiņa

Apskatīsim, kā izskatās bloķēta un ar atribūtu checked atzīmēta izvēles rūtiņas atzīme. Salīdzinājumam blakus atskaitīsimies uz nebloķētas atzīmētas atzīmes piemēru:

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

Piemērs . Bloķēts teksta ievades lauks

Tagad bloķēsim ievades lauku. Salīdzinājumam blakus apskatīsim piemēru nebloķēta ievades lauka:

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

Piemērs . Bloķēts textarea

Šeit mēs redzēsim bloķētu textarea (ievērojiet, ka bloķēta textarea izmēru var mainīt). Salīdzinājumam blakus atskaitīsimies uz nebloķēta textarea piemēru:

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

Piemērs . Bloķēts nolaižamais saraksts

Apskatīsim, kā darbojas bloķēts select. Salīdzinājumam blakus apskatīsim piemēru nebloķēta nolaižamā saraksta:

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

Skatiet arī

pseidoklase disabled,
kura nosaka stilus bloķētam elementam
pseidoklase enabled,
kura nosaka stilus nebloķētam elementam