Het disabled attribuut
Het attribuut disabled schakelt een
HTML-formulierelement uit,
dat wil zeggen, het maakt het inactief. Het is een attribuut
zonder waarde.
Het uitschakelen van elementen is meestal nodig om te voorkomen dat een gebruiker bepaalde waarden wijzigt (die niettemin aan de gebruiker moeten worden getoond in de vorm van formulierelementen). Soms worden elementen uit- (en weer ingeschakeld) met behulp van JavaScript.
Gedrag
In het geval van een knop (button
of input
met het attribuut type met de waarden button,
reset of submit) betekent uitschakelen
dat er niet op de knop geklikt kan worden.
In het geval van een tekstinvoerveld (input
of textarea)
kan de tekst niet worden gewijzigd of gekopieerd.
In het geval van checkboxes
en radio buttons
kan hun status (aangevinkt of niet) niet worden
gewijzigd. In het geval van vervolgkeuzemenu's
select
kan het geselecteerde lijstitem niet worden gewijzigd.
Een uitgeschakeld element heeft standaard een grijze achtergrond. Het zal ook niet deelnemen aan navigatie met de Tab-toets.
Voorbeeld . Uitgeschakelde knop
Laten we een knop uitschakelen met het attribuut
disabled. Ter vergelijking staat ernaast een voorbeeld
van een niet-uitgeschakelde knop (probeer er maar op
te klikken):
<button disabled>text</button>
<button>text</button>
:
Voorbeeld . Uitgeschakelde checkbox
Laten we nu kijken naar een uitgeschakelde checkbox. Ter vergelijking kijken we ernaast naar een voorbeeld van een niet-uitgeschakelde checkbox:
<input type="checkbox" disabled>
<input type="checkbox">
:
Voorbeeld . Uitgeschakelde en aangevinkte checkbox
Laten we kijken hoe een uitgeschakelde
en aangevinkte (met behulp van het attribuut checked)
checkbox eruitziet. Ter vergelijking
zien we ernaast een voorbeeld van een niet-uitgeschakelde
aangevinkte checkbox:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Voorbeeld . Uitgeschakelde tekstinvoer
Laten we nu een input uitschakelen. Ter vergelijking zien we ernaast een voorbeeld van een niet-uitgeschakelde input:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Voorbeeld . Uitgeschakelde textarea
Hier zien we een uitgeschakelde textarea (let op: de grootte van een uitgeschakelde textarea kan nog wel worden gewijzigd). Ter vergelijking zien we ernaast een voorbeeld van een niet-uitgeschakelde textarea:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Voorbeeld . Uitgeschakelde vervolgkeuzelijst
Laten we kijken hoe een uitgeschakelde
select werkt.
Ter vergelijking zien we ernaast een voorbeeld van een niet-uitgeschakelde
vervolgkeuzelijst:
<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>
:
