Its easy enough to create a single radio button. You write a small piece of code within your form to create the button and then supply some associated text. For example:
<input type="radio" value="blue" />blue
The problem is that one radio button by itself is pretty meaningless. So you code several more radio buttons but things still aren't working properly. The individual buttons can be selected or not completely independently of one another. What we need to do is to group the buttons together so that selecting one button will automatically unselect whichever button was previously selected.
To do this we add a name= parameter to all of the radio buttons within our group and supply the same value for the name in each case. Now when one button within the group having the same name is selected the previously selected button within that group is unselected. Supplying a name field also gives a name to the field that will contain the value for this radio button group. As each radio button should have a different value field assigned to it the field will be assigned the value associated with the selected button. We can even pre-assign one of the buttons to be selected by adding checked="checked" to that button.
So now we have one radio button group created and working but what if we want more than one group within the same form like this:
Well the code that I used to create the above radio buttons is as follows:
<input type="radio" value="1" name="size"
checked="checked" />small<br />
<input type="radio" value="2" name="size" />medium<br />
<input type="radio" value="3" name="size" />large<hr />
<input type="radio" value="red" name="colour"
checked="checked" />red<br />
<input type="radio" value="green" name="colour" />green<br />
<input type="radio" value="blue" name="colour" />blue
As you can see the difference between the first and second groups of radio buttons is that the groups have different names. The first group is called size and will be assigned a value of 1, 2, or 3 depending on which radio button in the first group is selected. The second group is called colour and will be assigned a value of "red", "green", or "blue" depending on which button in that group is selected.
This article written by Stephen Chapman, Felgall Pty Ltd.