labels and radio buttons....

how to use labels correctly with radio buttons

[DoppyNL]

Hi all,

We know we can use labels like this:

<label for="myeditbox">please enter:</label>
<input type="text" id="myeditbox" name="stupidname" />

So that the client knows that that specific label belongs to that form element.

But how should this be done with radio buttons?
As I allready use a seperate label for each different value for the radio buttons like this:

<label><input type="radio" name="radio" value="0" />No</label>
<label><input type="radio" name="radio" value="1" />Yes</label>

Am I right to conclude that I should do that like this:

<label for="yesnoradio">Yes or No?</lable>
<label><input type="radio" name="yesnoradio" id="yesnoradio" value="0" />No</label>
<label><input type="radio" name="yesnoradio" id="yesnoradio" value="1" />Yes</label>

note: I'm programming xhtml1.1 strict code only; so it has to validate!

tnx people :)

[coopster]

You won't want to use the for attribute on the first label. And every id attribute must be unique, so that won't validate. You could increment the id attribute though, something like ...

<span>Yes or No?</span> 
<label><input type="radio" name="yesnoradio" id="yesnoradio0" value="0" />No</label> 
<label><input type="radio" name="yesnoradio" id="yesnoradio1" value="1" />Yes</label>

[DoppyNL]

using span would remove the usefullnes of the label for the complete `form element` (where both radio buttons represent 1 input)

It's indeed true that each element must have a unique id, so that won't work.

Seems to me that it is currently not possible what I'm trying to do in xhtml.

too bad.

[coopster]

Sure it's possible, but you need to revisit your thought process. The LABEL element is used to specify labels for controls that do not have implicit labels. Implicit labels come with form controls that automatically have labels associated with them, such as press buttons (submit, for example). Each LABEL element is associated with exactly one form control, so both radio buttons cannot ever be defined as one form element, they are not. They can indeed be defined with the same name and be processed as arrays on the server-side, but in form control they are two separate objects.

I'm trying to understand the reason you feel you need to have a label wrapped around both radio buttons?