02 Stimmen

HTML: Checkbox aktivieren wenn auf Text daneben geklickt wird

Frage von Gast | 18.09.2011 um 09:32

Ich habe eine Checkbox auf einem HTML Formular und einen Text daneben, der das ganze beschreibt. Wenn ich nun auf den Text klicke, passiert nichts.

Ich möchte aber, dass die Checkbox aktiviert wird, wenn ich auf den Text klicke, so wie es ja auch bei Windows Programmen der Fall ist. Die Checkbox lässt sich so nur aktivieren, wenn man mit der Maus direkt auf die Checkbox klickt und das ist ja ziemlich klein und pisselig.

Wieso geht das nicht und wie kann ich das erreichen?

AntwortenPositivNegativ
Avatar
44 Stimmen

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

AntwortenPositiv Negativ
Antworten

Ähnliche Themen

HTML-Formular mit Daten vorbelegen

Tutorial | 0 Kommentare

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.