Radio Buttons
Radio buttons are collections of circular buttons that can be clicked "on" and "off."
A filled-in, darkened center in the button indicates that the button is chosen; a open center
indicates that the button is not chosen. Radio buttons normally provide users with
mutually exclusive choices. That is, only one of a group of buttons can be chosen.
When a different button is clicked, the previous button is turned off. A set of radio buttons
is shown below.
Choice 1
Choice 2
Choice 3
Figure 10-17. A set of radio buttons.
The <input type="radio"> Tag
Radio buttons are defined with one or more <input type="radio"> tags. A
separate tag is required for each button in a set. The general format for this tag is shown
below.
<input type="radio"
id="id"
name="name"
value="text"
checked="checked"
disabled="disabled"
readonly="readonly"
required="required"
>
|
Figure 10-18. General format for <input type="radio"> tag.
The <input type="radio"> tag only displays a button. In order to provide a
label for the button, text can appear either before or after the button code to place it to the
left or right of the button.
The id Attribute
An id can be assigned to a button if there is a need to identify it for individual
script processing, normally by a browser script. Otherwise, an id is not needed.
The name Attribute
Radio buttons are usually grouped to present a set of related choices for the user. In this case,
only one of the options can be chosen -- they are mutually exclusive choices. When a button is
clicked for selection, and that button is highlighted, any previously chosen button becomes
de-selected and un-highlighted. A group of radio buttons is made to act in this way by assigning
the same name to all buttons in the group, as shown in the following code
for the buttons displayed above.
<input type="radio" name="Choice">Choice 1<br>
<input type="radio" name="Choice">Choice 2<br>
<input type="radio" name="Choice">Choice 3<br>
Listing 10-12. Coding to group radio buttons.
There are three buttons in this group, each appearing on a separate line. A text label appears to
the right of the buttons to identify each choice. All buttons have the same name to enforce only one
choice from the group.
The value Attribute
In a manner similar to text boxes, password boxes, and textareas, radio buttons have data values
associated with the choices. These values are provided explicitly through value
attributes coded for the buttons. When a button is chosen, its particular value is associated with
the name of the button, that is, with the name assigned to all of the buttons in the group. Consider
the following example.
What is your favorite color?
Red
Green
Blue
Figure 10-19. A set of buttons for making a choice of a color.
What is your favorite color?<br>
<input type="radio" name="Color" value="Red">Red<br>
<input type="radio" name="Color" value="Green">Green<br>
<input type="radio" name="Color" value="Blue">Blue<br>
Listing 10-13. Code for a set of buttons to make a color choice.
All of the buttons share the name "Color" in order to set up a group of mutually exclusive choices.
The particular color chosen from the group is given by the value associated with the choice. So, if
the user clicks the first button, the color "Red" is chosen. More accurately, the value "Red" becomes
associated with the name "Color" as indicative of the choice.
It is normally always necessary to code value attributes for radio buttons. This is the way in which
buttons take on values and how a browser script or server program determines which button is clicked.
Also, it is not necessary to assign a value that matches the button label. Often, abbreviated codes are
used for values, while a more descriptive label is displayed.
What is your favorite color?<br>
<input type="radio" name="Color" value="R">Red<br>
<input type="radio" name="Color" value="G">Green<br>
<input type="radio" name="Color" value="B">Blue<br>
Listing 10-14. Code for a set of buttons to make a "coded" color choice.
A selection of one of the above buttons submits the name and value Color=R, Color=G, or Color=B to
the processing program, which then determines what action to take on the value code submitted.
The checked Attribute
When a set of radio buttons is first displayed, all of the buttons appear unchecked; that is, none
are selected and highlighted. You can, however, force one of the buttons in the group to appear
pre-checked, or pre-selected. You do this by coding the checked="checked" attribute
in the <input type="radio"> tag of the button you want to appear "on" when the
page is loaded.
Red
Green
Blue
Figure 10-20. A set of buttons with the first choice pre-selected.
What is your favorite color?<br>
<input type="radio" name="Color" value="R" checked="checked">Red<br>
<input type="radio" name="Color" value="G">Green<br>
<input type="radio" name="Color" value="B">Blue<br>
Listing 10-15. Code to pre-select a button.
The disabled Attribute
The disabled attribute is used to disable and grays out the control so that the
user can not interact with it. The disabled attribute is often associated with
controls that are assigned default values using the value attribute. With the
disabled attribute, users are not able to change or copy the default value.
The readonly Attribute
The readonly attribute is similar to the disabled attribute
and is used to prevent the user from changing the value of the control. The readonly
attribute is often associated with controls that are assigned default values using the
valueattribute. Unlike controls assigned the disabled attribute,
the contents of a control with the readonly attribute can be copied.
The required Attribute
The required attribute is new to HTML 5. It can be included with the text, url, email, and
password text box controls. When the attribute is set to true, it specifies
that the field must contain a value before submitting the form.