Ein breites Anwendungsspektrum haben Auswahlkästchen mit mehreren Wahlmöglichkeiten. Sie sind die input-Felder mit dem type-Attribut "checkbox". Besonders häufig treten sie in einer Gruppe auf, was es besonders wichtig macht, ihnen jeweils das name-Attribut zuzuweisen und denselben Namen zu geben. Außerdem sollte man hier auf keinen Fall auf den verzichten, da dem Benutzer sonst nur die Kästchen angezeigt werden und er überhaupt nicht weiß, was mit dem Kästchen ausgewählt wird. Wir greifen einmal wieder das Obstsalatbeispiel auf und lassen nun den Benutzer selbst seine Zutaten wählen:
<p>Wähle die Zutaten für deinen Obstsalat!</p>
<input name="obst" id="check-himbeeren" type="checkbox" value="himbeeren">
<label for="check-himbeeren">Himbeeren</label><br>
<input name="obst" id="check-trauben" type="checkbox" value="trauben">
<label for="check-trauben">Trauben</label><br>
<input name="obst" id="check-mangos" type="checkbox" value="mangos">
<label for="check-mangos">Mangos</label><br>
<input name="obst" id="check-limetten" type="checkbox" value="limetten">
<label for="check-limetten">Limetten</label>Die zusätzliche Angabe des value-Attributs ist wieder wichtig für eine eventuelle Auswertung des Formulars. Wird das Formular abgeschickt, werden die value-Attribute aller markierten Kästchen zusammen mit dem name-Attribut auch abgeschickt.
Aufgabe
Erstelle ein HTML-Dokument mit einem Formular und füge den obigen Code ein. Schau dir das Ergebnis im Browser an. Es gibt ein weiteres nützliches Attribut für Auswahlkästchen, nämlich das Attribut "checked". Wird dieses Attribut in dem input-Feld eingetragen, so wird das Kästchen schon vor der Benutzeraktion markiert. Dieses Attribut stellt außerdem einen Sonderfall dar, weil es keine Wertzuweisung benötigt (wir schreiben also nicht "checked=...", sondern einfach nur "checked"). Füge dieses Attribut bei manchen der Felder in deinem Beispielformular ein und schau dir wieder das Ergebnis an.