HTML Checkbox anlegen

AGB akzeptieren, Newsletter abonnieren, Hobbys auswählen – HTML Checkboxen sind überall! Diese kleinen Ankreuzfelder ermöglichen Mehrfachauswahl. In diesem Tutorial lernst du, wie du sie richtig einsetzt.

Einführung in das HTML Checkbox Tutorial

Was sind HTML Checkboxen

Checkboxen sind kleine Kästchen zum Anklicken. Der Unterschied zu Radio-Buttons: Bei Checkboxen kannst du MEHRERE Optionen gleichzeitig wählen!

<input type="checkbox">

Typische Anwendungsfälle

Du findest Checkboxen bei:

AGB/Datenschutz-Zustimmung
Newsletter-Anmeldung
Filteroptionen in Shops
Interessens- und Hobby-Auswahl
To-Do-Listen

Was du in diesem Tutorial lernst

Nach diesem Tutorial kannst du:

Einzelne Checkboxen erstellen
Checkbox-Gruppen bilden
Vorauswahl und Deaktivierung nutzen
Barrierefreie Checkboxen bauen

Voraussetzungen

Benötigte HTML-Kenntnisse

Du solltest HTML-Formulare und Input-Typen verstehen. Falls nicht, hol das kurz nach!

Entwicklungsumgebung

Texteditor und Browser – mehr brauchst du nicht.

Schritt-für-Schritt-Anleitung

Grundlegende Checkbox erstellen

HTML lernen

<input type="checkbox" id="zustimmung" name="zustimmung">
<label for="zustimmung">Ich stimme den Bedingungen zu</label>

Wichtige Attribute:

id: Eindeutige Identifikation
name: Für die Datenübertragung
for im Label: Verbindet Label mit Checkbox

Checkbox-Attribute verstehen

value: Welcher Wert übertragen wird (Standard: "on")
checked: Vorausgewählt
disabled: Gesperrt, nicht klickbar
required: Muss ausgewählt werden

Mehrere Checkboxen gruppieren

Gleicher name, verschiedene value:

<p>Wähle deine Hobbys:</p>
<input type="checkbox" id="sport" name="hobbys" value="sport">
<label for="sport">Sport</label>

<input type="checkbox" id="musik" name="hobbys" value="musik">
<label for="musik">Musik</label>

<input type="checkbox" id="lesen" name="hobbys" value="lesen">
<label for="lesen">Lesen</label>

Bei der Übertragung erhältst du alle ausgewählten Werte unter dem Namen "hobbys".

Code-Beispiele zu HTML

Newsletter-Checkbox

HTML Kurs starten

<input type="checkbox" id="newsletter" name="newsletter" value="ja">
<label for="newsletter">Ja, ich möchte den Newsletter erhalten</label>

Vorausgewählte Checkbox

<input type="checkbox" id="fotografie" name="hobbys" value="fotografie" checked>
<label for="fotografie">Fotografie</label>
[/syntaxhighlight>

<p><code>checked</code> aktiviert die Checkbox beim Laden der Seite.</p>

<h3>Deaktivierte Checkbox</h3>

[syntaxhighlight lang="html" id="disabled_checkbox"]
<input type="checkbox" id="premium" name="features" value="premium" disabled>
<label for="premium">Premium-Features (nur für registrierte Nutzer)</label>

Deaktivierte Checkboxen werden NICHT mit dem Formular übertragen!

Größenauswahl

<input type="checkbox" id="groesse_s" name="groesse" value="small">
<label for="groesse_s">S</label>

<input type="checkbox" id="groesse_m" name="groesse" value="medium">
<label for="groesse_m">M</label>

<input type="checkbox" id="groesse_l" name="groesse" value="large">
<label for="groesse_l">L</label>

Häufige Fehler & Troubleshooting

Fehler 1: Kein name-Attribut

Ohne name werden die Daten nicht übertragen!

FALSCH: <input type="checkbox">
RICHTIG: <input type="checkbox" name="newsletter">

Fehler 2: Kein Label

Ohne Label muss man genau auf die kleine Box klicken. Mit Label reicht ein Klick auf den Text!

BESSER:
<input type="checkbox" id="cb">
<label for="cb">Klickbarer Text</label>

Fehler 3: Gleiche ID mehrfach

Jede Checkbox braucht eine EINZIGARTIGE id!

HTML: Best Practices & Tipps

Semantisch korrekter Aufbau

Immer <label> verwenden
for und id müssen übereinstimmen
Aussagekräftige value-Werte

Barrierefreiheit

Labels sind PFLICHT für Screenreader! Der Klickbereich wird auch größer – gut für alle Nutzer.

Performance

Einzelne Checkboxen sind kein Problem. Bei hunderten: Überlege Lazy Loading oder Pagination.

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kennst jetzt Checkboxen:

<input type="checkbox"> – die Grundstruktur
name und value für Datenübertragung
checked und disabled für Zustände
<label> für Barrierefreiheit

Mit Checkboxen ermöglichst du Mehrfachauswahl in jedem Formular!

Bereit für mehr? Lerne als Nächstes, wie du HTML Radio Buttons für Einfachauswahl verwendest!