Атрибут disabled
Das Attribut disabled blockiert ein Element
eines HTML-Formulars,
macht es also inaktiv. Es ist ein Attribut
ohne Wert.
Das Deaktivieren von Elementen ist normalerweise notwendig, um dem Benutzer zu verbieten, bestimmte Werte zu ändern (die dem Benutzer dennoch in Form von Formularelementen angezeigt werden sollen). Manchmal werden Elemente (und deren Deaktivierung aufgehoben) mit JavaScript (de)aktiviert.
Verhalten
Im Falle eines Buttons (button
oder input
mit dem Attribut type mit den Werten button,
reset oder submit) bedeutet Deaktivierung,
dass der Button nicht geklickt werden kann.
Im Falle eines Text-Eingabefelds (input
oder textarea)
kann der Text darin nicht geändert oder kopiert
werden. Im Falle von Checkboxen
und Radio-Buttons
kann deren Zustand (angekreuzt oder nicht) nicht
geändert werden. Im Falle von Dropdown-Listen
select
kann der ausgewählte Listeneintrag nicht geändert werden.
Ein deaktiviertes Element hat standardmäßig einen grauen Hintergrund. Es wird auch nicht an Tab-Navigation mit der Tab-Taste teilnehmen.
Beispiel . Deaktivierter Button
Lassen Sie uns einen Button mit dem Attribut
disabled deaktivieren. Zum Vergleich daneben ein Beispiel
eines nicht deaktivierten Buttons (versuchen Sie, ihn
zu klicken):
<button disabled>text</button>
<button>text</button>
:
Beispiel . Deaktivierte Checkbox
Schauen wir uns nun eine deaktivierte Checkbox an. Zum Vergleich daneben sehen wir ein Beispiel einer nicht deaktivierten Checkbox:
<input type="checkbox" disabled>
<input type="checkbox">
:
Beispiel . Deaktivierte und angekreuzte Checkbox
Schauen wir uns an, wie eine deaktivierte
und mit dem Attribut checked
angekreuzte Checkbox aussieht. Zum Vergleich daneben
sehen wir ein Beispiel einer nicht deaktivierten,
angekreuzten Checkbox:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Beispiel . Deaktiviertes Text-Input
Lassen Sie uns nun ein Input-Feld deaktivieren. Zum Vergleich daneben sehen wir ein Beispiel eines nicht deaktivierten Input-Felds:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Beispiel . Deaktivierte Textarea
Und hier sehen wir eine deaktivierte Textarea (beachten Sie, dass die Größe der deaktivierten textarea geändert werden kann). Zum Vergleich daneben sehen wir ein Beispiel einer nicht deaktivierten Textarea:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Beispiel . Deaktivierte Dropdown-Liste
Schauen wir uns an, wie eine deaktivierte
select-Liste funktioniert.
Zum Vergleich daneben sehen wir ein Beispiel einer nicht deaktivierten
Dropdown-Liste:
<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>
:
