Web Development Tutorials


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"

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?

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.


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.

TOP | NEXT: Checkboxes