Schon oft habe ich mich geärgert, wenn ich ein Formular (besonders bei längeren) ausfüllen soll/muss, das Checkboxen und Radio-Buttons enthält.
Es ist wirklich sehr nervig, wenn man immer genau diese klitzekleinen Schaltflächen mit der Maus treffen muss.
Dabei könnte doch alles – mit wenig Mehraufwand – so einfach sein: Mit IDs und dem label-Tag:
Ein schlechtes Beispiel
<input type="checkbox" name="cb11" value="1" />
schlechte Checkbox 1<br />
<input type="checkbox" name="cb12" value="2" />
schlechte Checkbox 2<br />
<input type="checkbox" name="cb13" value="3" />
schlechte Checkbox 3<br />schlechte Checkbox 2
schlechte Checkbox 3
Wie geht es besser?
Das folgende Beispiel zeigt, dass mit nur ein paar Zeichen mehr eine wunderbare und benutzerfreundliche Lösung. Jedem Element (Checkbox) wird eine eindeutige ID zugewiesen. Der Text zu dem Element wird dann mit einem label-Tag und zugehöriger ID eingeschlossen und schon kann der ganze Text angeklickt werden, um den Zustand Elements zu ändern.
<input type="checkbox" name="cb21" value="1" id="id_cb21" />
<label for="id_cb21"> gute Checkbox 1</label><br />
<input type="checkbox" name="cb22" value="2" id="id_cb22" />
<label for="id_cb22"> gute Checkbox 2</label><br />
<input type="checkbox" name="cb23" value="3" id="id_cb23" />
<label for="id_cb23"> gute Checkbox 3</label><br />Radio Gaga
Natürlich funktioniert das ganze nicht nur bei Checkboxen, sondern wie das folgende Beispiel zeigt auch bei Radiobuttons.
<input type="radio" name="rb2" id="id_rb21" />
<label for="id_rb21"> guter Radiobutton 1</label><br />
<input type="radio" name="rb2" id="id_rb22" />
<label for="id_rb22"> guter Radiobutton 2</label><br />
<input type="radio" name="rb2" id="id_rb23" />
<label for="id_rb23"> guter Radiobutton 3</label><br />Textfelder
Bei meinem Test, was eigentlich bei der Anwendung auf Textfelder passiert, habe ich festgestellt, dass beim Klick auf den Text, der Cursor in das entsprechende Feld springt. Dabei ist der Nutzen allerdings nicht ganz so groß, da man in der Regel das Textfeld schon treffen sollte.
<input type="text" name="test" id="txt_test" />
<label for="txt_test"> Test</label>
Fazit
Um dem Benutzer das Ausfüllen eines Formulars so einfach wie möglich zu machen, sollte man den oben beschriebenen Mehraufwand – zumindest bei den Radiobuttons und den Checkboxen – in jedem Fall betreiben. Der Nutzen steht in jedem Fall über dem Aufwand.
