Formulare
Symbolgrafik Kontrollkästchen

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

Gruppe von Checkboxen

Stehen mehrere Checkboxen zur Auswahl, müssen die Checkboxen mit den HTML-Elementen <fieldset> und <legend> gruppiert werden:

Welches Obst essen Sie gerne?

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.