Zum Inhalt springen

Checkbox

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 18.10.2026

Eine Checkbox ist ein Kästchen zum Anhaken, unabhängig von anderen. Mehrere Antworten sind erlaubt, auch keine.

Checkbox

Formularfeld, das sich unabhängig von anderen an- und abhaken lässt.
Beispiel: „Eine Checkbox steht für eine Entscheidung mit zwei Zuständen.“

Ein Formular in einem beschrifteten Rahmen: Textfeld, Auswahlliste, zwei Radioschalter, eine Checkbox, ein mehrzeiliges Feld und ein Absendeknopf, jeweils rechts mit ihrem Markup benannt.
Die Checkbox steht für sich; Radioschalter darüber gehören dagegen zu einer Gruppe.

Wie sie notiert wird

<label>
  <input type="checkbox" name="newsletter" value="ja">
  Newsletter abonnieren
</label>

<input type="checkbox" name="themen" value="seo" id="t1">
<label for="t1">SEO</label>
<input type="checkbox" name="themen" value="webdesign" id="t2">
<label for="t2">Webdesign</label>

Oben die einzelne Zustimmung, unten mehrere Kästchen mit demselben Namen: Dann kommen alle angehakten Werte gemeinsam an, und der eigene value je Kästchen wird nötig.

Was beim Absenden geschieht

Nicht angehakte Kästchen werden gar nicht mitgeschickt. Wer im Backend prüft, darf also nicht auf einen Wert warten, sondern muss das Fehlen auswerten. Ein eigener value ist nur nötig, wenn mehrere Kästchen denselben Namen tragen.

Die Beschriftung

Ein Kästchen allein sagt nichts; es braucht ein label. Dieses vergrößert zugleich die Fläche zum Antippen, was auf dem Telefon den Unterschied zwischen bedienbar und ärgerlich ausmacht.

Siehe auch:

Radiobutton

Eine Gruppe, von der genau eines gewählt wird.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

input-Element

Ein Element, viele Erscheinungsformen.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

label-Element

Die Beschriftung, die am Feld hängt.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

form-Element

Umschließt die Felder und bestimmt, wohin die Eingaben gehen.

#Frontend-Entwicklung (HTML, CSS, JavaScript)