Coding Radio Buttons

Radio buttons are the one form field type where you need to have more than one in order for them to be usable at all. This means that they require slightly different coding from all of the other fields in your form. To start with, all of the actual radio buttons need to have the same name attribute in order to define them as a group in the first place. Another important part of the way the radio buttons need to be coded (this time shared with check boxes) is that it is essential that they have the label properly attached so that clicking on the label has the same effect as clicking on the button itself. Also important is to provide a visual indication that the buttons are grouped - particularly if you have more than one group of radio buttons on the form.

There are two ways of attaching a label to each button. One way is to give each button its own unique id and then use the for attribute on the label to attach it to the button.

<input type="radio" name="myradio" id="myradio1"><label for="myradio1"> my label</label>

The alternative is to enclose the button inside of the label.

<label><input type="radio" name="myradio" > my label</label>

While this second variant is slightly shorter with regard to the code needed to attach the label to the button, it is less semantic as it implies that the button is a part of its own label. For many people this isn't an issue. I still prefer the first version though as the id on the button also provides an easy way of referencing the individual buttons from JavaScript. While you are more likely to want to reference the group rather than the individual buttons in a radio button group from your JavaScript, this is the only field type where this is the case and all of your other form fields will likely need ids so that the JavaScript can access them and so using ids to attach the labels to all of those fields makes sense and using them for the radio buttons as well maintains consistency. Anyway you should use whichever version of the HTML for attaching the labels to your radio buttons as you use for attaching the labels to all of your other form fields - the only difference being that if you use an id to attach it then you will need to have the ids different from the name as the name needs to be the same for all the buttons in a group while the ids must be unique within the page. The simplest solution is to simply add a number to the end of the name for each id.

As for visually identifying the group so that people filling out the form can tell what radio buttons belong to which group. The simplest way to do this is to wrap the radio button group inside a fieldset which is the form field element specifically intended for identifying a group of form fields. The default representation of a fieldset is to place a border around the group but you can style this with CSS to visually separate the group in whatever way you like. Once you have a fieldset, you can then use the legend tag to specify what the group is for. This provides the best way to ask the question that selecting a radio button is supposed to answer in a way that makes it clear what answers belong to which question.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow