Disabled-attribuut

Die attribuut disabled skakel 'n HTML-vorm-element uit, dit maak dit onaktief. Dit is 'n waarde-lose attribuut.

Die uitskakeling van elemente is gewoonlik nodig om te verhoed dat die gebruiker sekere waardes verander (wat nietemin aan die gebruiker getoon moet word as vormelemente). Soms word elemente deur JavaScript uitgeskakel (en weer ingeskakel).

Gedrag

In die geval van 'n knoppie (button of input met die attribuut type op die waardes button, reset of submit) beteken uitskakeling dat die knoppie nie gedruk kan word nie. In die geval van 'n teksinvoerveld (input of textarea) kan die teks nie daarin verander of gekopieër word nie. In die geval van merkieskassies en keuseknoppies kan hul toestand (gemerk of nie) nie verander word nie. In die geval van keuselyste select kan die gekose lysitem nie verander word nie.

'n Uitgeskakelde element het standaard 'n grys agtergrond. Dit sal ook nie deelneem aan Tab-sleutel oorgange nie.

Voorbeeld . Uitgeskakelde knoppie

Kom ons skakel 'n knoppie uit met die attribuut disabled. Ter vergelyking is daar 'n voorbeeld van 'n nie-uitgeskakelde knoppie langsaan (kom ons probeer dit druk):

html<button disabled>teks</button>
<button>teks</button>

Результат:

Voorbeeld . Uitgeskakelde merkieskassie

Kom ons kyk nou na 'n uitgeskakelde merkieskassie-vlaggie. Ter vergelyking kyk ons na 'n voorbeeld van 'n nie-uitgeskakelde vlaggie langsaan:

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

Результат:

Voorbeeld . Uitgeskakelde en gemerkte merkieskassie

Kom ons kyk hoe 'n uitgeskakelde en gemerkte merkieskassie-vlaggie met die attribuut checked lyk. Ter vergelyking kyk ons na 'n voorbeeld van 'n nie-uitgeskakelde gemerkte vlaggie langsaan:

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

Результат:

Voorbeeld . Uitgeskakelde teksinvoer

Kom ons skakel nou 'n invoer uit. Ter vergelyking kyk ons na 'n voorbeeld van 'n nie-uitgeskakelde invoer langsaan:

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

Результат:

Voorbeeld . Uitgeskakelde teksarea

En hier sien ons 'n uitgeskakelde teksarea (let op dat die grootte van die uitgeskakelde textarea verander kan word). Ter vergelyking kyk ons na 'n voorbeeld van 'n nie-uitgeskakelde teksarea langsaan:

html<textarea disabled>teks</textarea>
<textarea>teks</textarea>

Результат:

Voorbeeld . Uitgeskakelde keuselys

Kom ons kyk hoe 'n uitgeskakelde select werk. Ter vergelyking kyk ons na 'n voorbeeld van 'n nie-uitgeskakelde keuselys langsaan:

html<select disabled>
  <option>stad1</option>
  <option selected>stad2</option>
  <option>stad3</option>
  <option>stad4</option>
</select>
<select>
  <option>stad1</option>
  <option selected>stad2</option>
  <option>stad3</option>
  <option>stad4</option>
</select>

Результат:

Sien ook