Quicktipp: Gruppe von Radiobuttons beschriften

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? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>