Formularelement Checkbox
<input type="checkbox">

Über das Element ein Element ausgewählt werden. Es ist auch möglich, mehrere Möglichkeiten anzubieten, die dann Alle ausgewählt werden können, wie z.B. „Ihre Hobbys“.

Das typische Erscheinungsbild von Checkboxen ist eckig. Damit weiß der Benutzer intuitiv, dass es eine „und“-Auswahl ist, wenn mehrere Möglichkeiten angegeben sind.

Tipp zu Checkboxen, die angeklickt werden muss, bevor Formular abgesendet werden kann

In vielen Formularen bei Firmen muss eine Zustimmung zu den AGBs und Datenschutzbestimmungen erfolgen, bevor das Formular abgesendet werden darf. Hier können wir über eine kleine Zeile JavaScript erreichen, dass der Submit-Button erst in Grau und inaktiv angezeigt wird, bis die entsprechende Checkbox für due Zustimmung den AGBs angeklickt wird. Hier der entsprechende Code:

<input type="checkbox" 
 onchange="document.getElementById('absenden').disabled = !this.checked">  
 AGBs zustimmen

<br>

<input type="submit" name="absenden" id="absenden" value="submit" disabled>

Und zum Testen

Anklicken auf vom Text und nicht nur vom Kästchen

Soll der Besucher auch den beschreibenenden Text anklicken können, müssen wir in HTML kennzeichnen, was alles zu der Checkbox gehört, also auch welcher Text zu diesem Element gehört.

Die geschieht über das HTML-Element <label>

<label>
<input type="checkbox" >  
 AGBs zustimmen
</label>

Und hier zum Testen - bitte auf den Text „AGBs zustimmen“ klicken (im obigen Beispiel ohne LABEL kann dies auch probiert werden).