Radio Button Validation

3. Button Labels

In order for the person filling out the form to have some idea of what each button in our radio button group does we need to provide descriptions for each button. The simplest way to do this is to provide a descriotion as text immediately following the button.

There are a couple of problems though with just using plain text.

1. The text may be visually associated with the radio button but which text is associated with which button may not be obvious to everyone (particularly those who are listening to the page rather than reading it).
2. The usual behaviour for text associated with radio buttons in most programs is that clicking on the associated text will select the button and unless we can actually associate the text with the button we can't get it to work that way.

Here is what the complete HTML for one of the buttons on our example form looks like:

As the radio button with the id referred to in the for parameter of the label tag is actually contained within the tag itself, the for and id parameters are redundant in some browsers. There are browsers however that are not smart enough to recognise the nesting that will function correctly if these parameters are included so it is worth putting them in so as to maximize the number of browsers on which this code will function.

That completes the coding of the radio buttons themselves. The final step is to set up radio button validation using Javascript.