HTML: Checkbox aktivieren wenn auf Text daneben geklickt wird

Leider weiß dein Browser nicht, welcher Text zu deiner Checkbox gehört. Deswegen kann er auch die Checkbox nicht aktivieren, wenn du auf den Text klickst. So kannst du dem Browser sagen, welcher Text zu deiner Checkbox gehört:

<label>
  <input name="cb" type="checkbox" value="1"> Text 
</label>

Der Bereich, der sich in dem Tag "label" befindet, wird damit sensitiv, um die Checkbox zu aktivieren.

Wir sollten zusätzlich aber noch mit CSS den Cursor gestalten, da der Nutzer verwirrt sein kann, wenn sich der Mauszeiger über dem klickbaren Bereich nicht ändert. Mit folgender Anweisung (alternativ kannst du auch eine generelle CSS-Regel für deine ganze Seite aufstellen), bekommst du den richtigen Mauszeiger wie er auch bei Links angezeigt wird:

<label style="cursor: pointer">
  <input name="cb" type="checkbox" value="1"> Text
</label>

Neben dieser Methode, kann man einen Bezug mit "label" auch auf diese Weise herstellen:

<input id="cbid" name="cb" type="checkbox" value="1">
<label for="cbid">Text</label>

Mit dieser Methode musst du nicht mehr deine gesamte Checkbox umrahmen, um einen Bezug herzustellen. Diese Methode eignet sich besonders dann, wenn die Elemente zum Beispiel in einer Tabelle angeordnet sind und es noch andere HTML-Tags zwischen den einzelnen Elementen gibt.

Übrigens kannst du den label-Tag auch für Textareas oder Inputs verwenden. Damit lässt sich der Fokus beim Klick auf den Text auf das Eingabefeld bringen und Blinde sehen bei der Eingabe, welches Feld zu welchem Text gehört (Stichwort barrierefreies Internet).
19.09.2011 um 12:54