/beyond/webmaster/article.php/3570056/Radio-for-help.htm Radio for help!

Radio for help!

By Vince Barnes

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!

There are several ways to code this type of choice offering. You could provide a text box in which your visitor types their choice. That's a bit tough to validate, though. You could provide a drop down (aka pop-up) list box. The options in the selection list would begin with "Choose One" and continue with the three required choices. You would then write a little JavaScript to verify that a selection has been made and that the first option ("Choose One") is not the selected option. In this particular case, this would be a good method. Alternatively, you could provide some checkboxes. Then you would write some JavaScript to ensure that one, and only one, of the checkboxes has been checked. These are all reasonable options but there's another one which may be the simplest and most elegant of all. It's the radio button.
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&nbsp;
<input type="radio" name="color" value="yellow">Yellow&nbsp;
<input type="radio" name="color" value="green">Green</p>

<input type="radio" name="number" value="one" checked>One&nbsp;
<input type="radio" name="number" value="two">Two&nbsp;&nbsp;
<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.

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date