Für Beschriftungen von Formularfeldern ist das label-Element gedacht:
<input type="radio" name="farben" id="rot" value="rot">
<label for="rot">rot</label>
Damit der Bezug zwischen label und input-Element klappt, muss der Wert des for-Attributs des label-Elements mit dem Wert der id des input-Elements übereinstimmen (im Beispiel oben „rot“).
Was nimmt man aber für die Beschriftung einer Gruppe von Radiobuttons?
<was-hier?>Farbe wählen</was-hier?>
<input type="radio" name="farben" id="rot" value="rot">
<label for="rot">rot</label>
<input type="radio" name="farben" id="blau" value="blau">
<label for="blau">blau</label>
Spontan hätte ich am liebsten ein weiteres label-Element eingesetzt, aber das funktioniert natürlich nicht. Und einfach ein Absatz ist nicht aussagekräftig. Das richtige dafür ist die legend eines fieldset, also folgende Struktur:
<fieldset>
<legend>Farbe wählen</legend>
<input type="radio" name="farben" id="rot" value="rot">
<label for="rot">rot</label>
<input type="radio" name="farben" id="blau" value="blau">
<label for="blau">blau</label>
</fieldset>
Gefunden unter anderem bei http://webaim.org/techniques/forms/controls#radio
Dieselbe Lösung eignet sich ebenfalls zur Beschriftung von Checkboxen …
Kommentare sind geschlossen.