Radio buttons derive their name from technology that
became obsolete right around the time that the Internet started
gaining popularity. The Net result was a mechanical one-of-many
exclusive choice element, known today as "radio buttons."
You can create radio buttons in your HTML forms by
adding an <INPUT
TYPE="radio"> tag to your form, which
creates this:
Needless to say, something seems to be missing here.
First, radio buttons, like checkbox elements, contain no information
about the choice they represent. To make them meaningful to the
user, you must include some sort of label or content that describes
the purpose of the radio button.
Secondly, unlike a checkbox, radio buttons never
exist alone. To be effective, there must be at least two radio
buttons, and they must somehow be associated with each other within
the form. To create this association, use the NAME
attribute to give all the radio buttons in a group the same name.
The browser will recognize the group and link the radio buttons so
that exactly one of the buttons is selected at any time.
Here is a more complete set of radio buttons, with
both context and a common name:
<DL>
<DT>
How should we ship your order?
<DD>
<INPUT TYPE="radio" NAME="shipping"> Next day air
<BR>
<INPUT TYPE="radio" NAME="shipping"> Second day air
<BR>
<INPUT TYPE="radio" NAME="shipping"> UPS ground
<BR>
<INPUT TYPE="radio" NAME="shipping"> Parcel post
</DL>
The
resulting input element works just right:
You can confirm (by clicking on the options) that
only one of these elements can be selected at a time.
Because the browser associates a group of radio
buttons by their common name, they need not be adjacent in the
layout of your document. You can place members of a radio button
group all over your document, and you'll still get the one-of-many
selection behavior. You can also create many groups within a
single form, as long as each group has a unique name shared among
the radio buttons in the group.
Radio
button values
If you want to submit the value of a radio button
group to to server when the form is processed, you'll need to add
a VALUE
attribute to each radio button. Presumably, each element will have
a different value; the value of the selected item, along with the
name of the group, will be transmitted to the server. To make our
shipping example complete, we can add a value to each radio
button:
<DL>
<DT>
How should we ship your order?
<DD>
<INPUT TYPE="radio" NAME="shipping" VALUE="next air"> Next day air
<BR>
<INPUT TYPE="radio" NAME="shipping" VALUE="second air"> Second day air
<BR>
<INPUT TYPE="radio" NAME="shipping" VALUE="ground"> UPS ground
<BR>
<INPUT TYPE="radio" NAME="shipping" VALUE="parcel"> Parcel post
</dl>
If the "UPS
ground" item was selected when the form was submitted, the
name shipping
with the value ground
would be sent to the server.
When you create a group of radio buttons, the
browser will not initially select a member of the group. Since one
member should always be selected, you should always add the CHECKED
attribute to the default selection, forcing it to be selected when
the form is first displayed or reset by the user. This ensures
that a value for the element will be sent when the form is
submitted, even if the user does not choose one. Of course, the
user can always override this default selection by choosing a
different radio button.
Checkboxes and radio buttons are useful if the
number of choices are small, or easily predefined. When the range
of choices grows, it's time to use other Mehtods. Other Methods
being: scrolling lists and pulldown menus.
<< BACK
Index: Website Creation
Resource Guide To - Website Development & Design
Index 2:
Creating Forms - Everything About Forms