Using "label for" on radio buttons
You almost got it. It should be this:
<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>
The value in for
should be the id of the element you are labeling.
Either structure is valid and accessible, but the for
attribute should be equal to the id
of the input element:
<input type="radio" ... id="r1" /><label for="r1">button text</label>
or
<label for="r1"><input type="radio" ... id="r1" />button text</label>
The for
attribute is optional in the second version (label containing input), but IIRC there were some older browsers that didn't make the label text clickable unless you included it. The first version (label after input) is easier to style with CSS using the adjacent sibling selector +
:
input[type="radio"]:checked+label {font-weight:bold;}