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:
<HTML>
<HEAD>
<TITLE>Radio Button Example</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="ouraction.cgi">
<p>
<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>
<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>
<p>
<input type=submit VALUE="Submit">
<input type=reset VALUE="Reset">
</p>
</FORM>
</BODY>
</HTML>
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
https://www.htmlgoodies.com/beyond/cgi and for more about forms, see
https://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.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
