Phase 5

Checkbox mit klickbarem Label

Heute wirds mal wieder nerdig auf Phase 5, aber es gibt da etwas, was mich regelmäßig nervt: Online-Formulare mit Checkboxen bzw. Radiobuttons, deren Bezeichnungen (Labels) nicht klickbar sind, so dass man die stecknadelkopfgroßen Boxen bzw. Buttons direkt klicken muss.

Beispiel:

Da könnte ich mich regelmäßig aufregen. Dabei ist es alles andere als ein Kunststück, ein klickbares Label zu erstellen. Entweder umschließt man das input-Tag mit dem label-Tag:

<label>Klickbares Label <input type="checkbox" /></label>

Oder — falls man das Formular mit einer Tabelle oder einer Definition List strukturiert — man vergibt der Checkbox bzw. dem Radiobutton eine ID und spricht diese mit dem label-Attribut 'for' an:

<label for="checkbox_id">Klickbares Label</label> <input type="checkbox" id="checkbox_id" />

Mehr ist es nicht. Also an alle da draußen, die Online-Formulare erstellen, oder vorhaben dies zu tun - macht das Label klickbar. Für mehr Usability und meinen Seelenfrieden. Danke!