Checkbuttons (Auswahlfelder)

<input type="checkbox"> definiert ein Auswahlfeld.

Gültige Attribute

Checkbuttons ermöglichen dem Benutzer ein schnelles Aus- oder Abwählen eines Feldes. In der Regel werden mehrere Felder gruppiert, aus denen der Benutzer dann eine Auswahl treffen kann. In einer Gruppe von Checkbuttons ist es möglich, mehrere Elemente auszuwählen.

Folgende Attribute stehen zur Verfügung:

```
type="checkbox"
```
Definiert als Feldtyp einen Checkbutton.
```
name="computer"
```
Weist dem Checkbutton einen Variablennamen zu. Es sind nur Buchstaben und Zahlen erlaubt, weder Leerzeichen noch Sonderzeichen dürfen verwendet werden. Alle Checkbuttons einer Gruppe müssen den gleichen name haben.
```
value="cd"
```
Ist ein Element ausgewählt, wird bei der Übertragung des Formulars der value-Wert übertragen. Ist das Element nicht ausgewählt, wird es bei der Übertragung übergegangen.
```
checked
```
Diese Angabe ist optional. Wird das Attribut gesetzt, wählt der Browser das Element automatisch aus. Es kann durch den Benutzer auch wieder abwählt werden.

Beispiel: Checkbuttons

Klicken Sie hier, und finden Sie eine Gruppe von Checkbuttons. Der erste ist aktiviert, lässt sich jedoch durch Mausklick wieder zurücksetzten. Da es sich um eine Gruppe handelt, wird allen Checkbuttons der gleiche name zugewiesen.

Der HTML-Code sieht folgendermaßen aus:

<p><b>Warum arbeiten Sie mit Windows?<br>
(Nennen Sie mindestens 2 Gründe)</b></p>

<form method="POST">
  <p><input type="checkbox" name="windows" value="absturz" checked>Weil es nie abstürzt</p>
  <p><input type="checkbox" name="windows" value="fenster">Wegen der vielen sauberen Fenster</p>
  <p><input type="checkbox" name="windows" value="gates">Weil ich Bill-Gates-Fan bin</p>
  <p><input type="checkbox" name="windows" value="maus">Ich finde es toll, mit der Maus zu klicken</p>
</form>

Der dargestellte HTML-Code zeigt wieder den relevanten Teil des Beispiels, auf die Darstellung der Ihnen schon bekannten Tags wie <head>, <body>, <title> usw. haben wir verzichtet.

HTML lernen (3): Formulare einbinden