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 …