Kontrollkästchen (Checkboxen) in HTML-Formularen

In Formularen, die mit HTML erstellt werden, verwendet man häufig sogenannte Kontrollkästchen, die auch Checkboxen genannt werden. Sie sind vergleichbar mit Ankreuzfeldern, die man vielfach auf Papierformularen vorfindet. Hierbei hat man die Auswahl, keine, eine oder mehrere Checkboxen auszuwählen. Eine typische Anwendung kann z.B. stattfinden, wenn man den Benutzern bei der Frage nach den Interessen gewisse Werte vorgeben möchte, aus denen ausgewählt werden kann. So haben die Benutzer eine gewisse Flexibilität bei der Auswahl und können trotzdem nicht jede beliebige Angabe machen, wie das z.B. bei normalen Eingabefeldern im Grunde der Fall ist.

Checkboxen in HTML-Formularen

HTML-Code für Checkboxen

Als HTML-Code verwendet man bei Checkboxen wie bei normalen Eingabefeldern den INPUT-Tag. Die Unterscheidung zwischen einem normalen Eingabefeld und einer Checkbox erfolgt über das Typ-Atribut. Bei Checkboxen verwendet man den Typen checkbox und das Attribut wird in der Form type="checkbox" eingegeben. Ein Beispielcode für HTML und XHTML.

<!-- In HTML -->
<input type="checkbox">

<!-- In XHTML -->
<input type="checkbox" />

Attribute bei Checkboxen

Weitere Attribute können mit einem Leerzeichen getrennt eingegeben werden. Für Checkboxen sind vor allem folgende Attribute von Bedeutung.

  • name: Der Name der Checkbox. Wird zum Auslesen des Werts benötigt. Wenn die Checkbox ausgewählt wurde, ist der Rückgabewert beim Auslesen das, was im Attribut value="..." angegeben wurde. Ist die Checkbox nicht ausgewählt, ist der Rückgabewert beim Auslesen NULL (leer).
  • id: Die eindeutige ID der Checkbox. Die unterschiedliche Handhabung zwischen den beiden Attributen Name und ID ist wie bei normalen Eingabefeldern und werden ausführlicher unter Attribute bei einzeiligen Eingabefeldern erläutert.
  • value: Der Wert, der an das Script übertragen wird, wenn man das Formular abschickt. Wenn der Wert über den Namen ausgelesen wird, ist der Rückgabewert das, was als value="..." angegeben wurde.

Ein Beispielcode mit allen drei Attributen.

<!-- In HTML -->
<input type="checkbox" name="hobby1" id="hobby1" value="sport">

<!-- In XHTML -->
<input type="checkbox" name="hobby1" id="hobby1" value="sport" />

Würde die Checkbox ausgewählt und das Formular z.B. an ein PHP-Script abgeschickt werden, könnte man über den Namen den Inhalt von hobby1 auslesen und würde als Rückgabewert sport erhalten. Die ID spielt bei diesem Vorgang keine Rolle. Die ID könnte man z.B. als Sprungmarke bei internen Links oder in einem JavaScript-Programm (clientseitig) verwenden.

  • checked: Mit dem Attribut checked wird festgelegt, dass die Checkbox nach dem Laden der Seite initial ausgewählt sein soll und kann ggf. vom Benutzer geändert werden. So können Checkboxen vorab als ausgewählt gesetzt werden und dem Benutzer das Auswählen abnehmen. Bei der Schreibweise des Codes kann man in HTML die kurze Schreibweise (ohne Wert) verwenden. In XHTML ist dagegen die lange Form mit der Angabe des Werts notwendig. Ein Beispielcode.
<!-- In HTML -->
<input type="checkbox" checked>

<!-- In XHTML -->
<input type="checkbox" checked="checked" />

Man sollte sehr gut überlegen, ob man diese Funktion für das initiale Setzen überhaupt nutzt. Denn, es sollte eigentlich in allen Fällen der User explizit auswählen, was zutreffend ist. Trotzdem hat das Attribut seine Daseinsberechtigung. Ein sinnvoller Einsatz könnte z.B. dann stattfinden, wenn nach dem Abschicken des Formulars die Daten auf Plausibilität und Gültigkeit überprüft und bei fehlerhaften Eingaben der Benutzer wieder auf das Formular geleitet werden soll. In solchen Fällen werden nämlich normalerweise alle bereits gemachten Eingaben entfernt.

Man könnte das Formular an dieser Stelle z.B. in PHP so programmieren, dass bereits ausgewählte Checkboxen das Attribut checked erhalten, damit die Benutzer die Auswahl nicht erneut tätigen müssen. Für die meisten Benutzer ist es nämlich ärgerlich, wenn sie ein Formular ausgefüllt und abgeschickt haben, das Formular vom verarbeitenden Script aufgrund von (kleinen) Fehlern jedoch nicht angenommen wird und alle gemachten Eingaben entfernt werden. Insbesondere bei langen und komplizierten Formularen sollte man soweit es geht das erneute Ausfüllen eines Formulars vermeiden und auf wichtige Felder beschränken, die aus verschiedenen Gründen immer ein explizites Auswählen vor dem Abschicken erfordern.

  • disabled: Ist das Attribut disabled gesetzt, wird die Checkbox quasi deaktiviert und ist lediglich visuell sichtbar. Es kann nicht ausgewählt werden und beim Abschicken des Formulars an ein Script wird für die Checkbox kein Wert übertragen. Das Attribut kann in HTML in minimierter Form angegeben werden. In XHTML wird der Wert mit angegeben. Ein Beispielcode.
<!-- In HTML -->
<input type="checkbox" disabled>

<!-- In XHTML -->
<input type="checkbox" disabled="disabled" />

Eine berechtigte Frage ist, warum man eigentlich eine Checkbox (oder andere Formularfelder) auf deaktiviert setzt. Man könnte z.B. mit PHP und JavaScript das Formular so programmieren, dass die Formularfelder abhängig von gewissen Umständen sind. Man könnte z.B. festlegen, dass eine Checkbox solange deaktiviert ist, bis eine vorherige Checkbox ausgewählt wurde.

Attribute in HTML5

Mit HTML5 haben im Bereich Formulare einige Neuerungen Einzug erhalten. Folgende Attribute können für Checkboxen wichtig sein.

  • form: Vor HTML5 mussten sich alle Formularfelder innerhalb des FORM-Tags befinden. Mit der Angabe der Formular-ID kann eine Checkbox einem Formular zugeordnet werden, obwohl sich die Checkbox außerhalb des FORM-Tags befindet. Hierfür muss dem FORM-Tag eine eindeutige ID zugewiesen werden. Ein Beispielcode.
<!-- Ab HTML5 -->
<form id="formularid">
</form>

<!-- Checkbox außerhalb des FORM-Tags -->
<input type="checkbox" form="formularid">
  • required: Definiert ein Pflichtfeld. Ist lediglich eine clientseitige Prüfung durch den Browser.
  • autofocus: Legt fest, dass nach dem Laden der Webseite das Formularfeld ausgewählt wird.

In beiden Fällen ist in HTML5 die Schreibweise in verkürzter Form oder die XHTML-Schreibweise möglich. Ein Beispielcode.

<!-- In HTML-Schreibweise -->
<input type="checkbox" autofocus>
<input type="checkbox" required>

<!-- In XHTML-Schreibweise -->
<input type="checkbox" autofocus="autofocus" />
<input type="checkbox" required="required" />

Inline-Element in Block-Element platzieren

Der INPUT-Tag gehört zu den Inline-Elementen, die in Block-Elementen platziert werden müssen, z.B. in einem DIV-Container. Daher haben die zuvor beschriebenen Codes einen Schönheitsfehler und sollten für die richtige Syntax in einem Block-Element platziert werden. Ein Beispielcode.

<div><input type="checkbox"></div>

Die Formatierung der Checkbox und des umschließenden Block-Elements kann über CSS erfolgen.