Radio for help!
It's your choice: red, yellow or green. You must choose one, but
you must choose only one. If this is a choice that you are offering your
customer on your web site, what's the best way to code it onto a web page? How
do you validate that a choice is made and how do you ensure that only one choice
is made? To find out, read on!
Radio buttons are groups of buttons that allow for the exclusive selection of one of a set of options. (Say what? <g>) In other words (thank you!) there is a group of buttons such that when you click on any one, all the others in the group are automatically unclicked. This means that one and only one of the buttons can be clicked. If you set one of the options as the default, or pre-selected, option, then you wouldn't need any further validation on the selections. Your site visitor would automatically select one and only one of your options.
Would you like to see some sample code? Ok - here goes:
<TITLE>Radio Button Example</TITLE>
<FORM METHOD="POST" ACTION="ouraction.cgi">
<input type="radio" name="color" value="red" checked>Red
<input type="radio" name="color" value="yellow">Yellow
<input type="radio" name="color" value="green">Green</p>
<input type="radio" name="number" value="one" checked>One
<input type="radio" name="number" value="two">Two
<input type="radio" name="number" value="three">Three</p>
<input type=submit VALUE="Submit">
<input type=reset VALUE="Reset">
This example is a complete page that will accept the users input and send it to a CGI script called "ouraction.cgi". (For more about CGI see http://www.htmlgoodies.com/beyond/cgi and for more about forms, see http://www.htmlgoodies.com/tutorials/forms)
Now let's take a look at those radio buttons.
There are two groups shown here, which will help to illustrate how one group is differentiated from another. The first group looks like the choice I was talking about earlier. There are three buttons defined by -- input type="radio" -- as radio buttons. They are collected into a group by the fact that they all have the same name. In our example, they all appear on the same line on the form. This is for our convenience only. It doesn't matter where on the form the members of the group are placed, only that they all have the same name. When passed to the cgi script, there will be a data item named "color" having a value of "red", "yellow" or "green". In this example, the first option for color has been marked as "checked". This means that this option will be filled in on the form when the form is presented to the browser, and makes this the default. Thus "color" has been given a default value of "red".
The second group is similar to the first, except that it is called "number", has options for "one", "two" or "three" and has a default value of "one".
As you can see, Radio Buttons provide a simple means for your
visitors to indicate their choices.