
Checkbox (Kontrollkästchen)
[Materialsammlung]
Checkboxen sind Auswahlkomponenten in Formularen.
Einzelne Checkbox
Eine einzelne Checkbox wird gewöhnlich lediglich im Kontext einer Zustimmung eingesetzt. Die Zustimmung muss durch Anklicken ausdrücklich gegeben werden, um etwa eine weitere Datenverarbeitung zu akzeptieren.
Codebeispiel
Der HTML-Code für das obige Beispiel sieht folgendermaßen aus:
<input id="checkbox1" type="checkbox" required /> <label for="checkbox1" > Ich stimme der Verarbeitung meiner Daten zu! </label>
Erläuterungen zum Code
- Das Kontrollkästchen wird im
<input>
-Element durchtype="checkbox"
realisiert. - Die Beschriftung erfolgt durch das
<label>
-Element. - Mit dem Wert des
for
-Attributs wird auf dasid
-Attribut des Kontrollkästchens referenziert. - Bei Checkboxen wird die Beschriftung durch das <label>-Element im Code unter das <input>-Element gesetzt, damit sich auch die Beschriftung hinter der Checkbox befindet.
- Da das Aktivieren des Kontrollkästchens aus der Perspektive der weiteren Datenverarbeitung erforderlich ist, wird das
<input>
-Element mit dem HTML5 Attributrequired
versehen.
Gruppe von Checkboxen
Stehen mehrere Checkboxen zur Auswahl, müssen die Checkboxen mit den HTML-Elementen <fieldset>
und <legend>
gruppiert werden:
Codebeispiel
<fieldset> <legend> <h3>Welches Obst essen Sie gerne?</h3> </legend> <ul> <li> <input id="apfel" type="checkbox" /> <label for="apfel" > Äpfel </label> </li> ... </ul> </fieldset>
Erläuterungen zum Code
Die HTML-Elemente werden folgendermaßen verwendet:
<fieldset>
- … umrandet die Komponente aus Beschriftung und Auswahlmöglichkeiten.
<legend>
- ... enthält die Beschriftung, die auf die Auswahlelemente anzuwenden ist.
<h3>
- ... kann optional eingesetzt werden, um eine Navigationsmöglichkeit zur Fragestellung für Screen Reader bereitzustellen.
<ul>
und<li>
- ... können optional eingesetzt werden, um bei der Cursornavigation mit einem Screen Reader die Anzahl der Auswahlmöglichkeiten anzugeben.
<input>
- ... dient zur Realisierung des Kontrollkästchens.
<label>
- ... dient zur Beschriftung der einzelnen Auswahlmöglichkeiten.