The Radio Widget

The Radio Button Widget

The Radio Button Widget is a lot like the Check Box widget in that it gives the user a way to select an item from a group. The main difference though is that radio buttons are used in radio groups that force the user to select one and only one item from a group.
Like check boxes the radio button can be set to either an "on" state or an "off" state by the user. Typically, the "on" state will look like a checked box or a filled in circle. A standard radio button group is shown below:

Try it out...check one then check another.

Behind the scenes, the above radio buttons were created with the following HTML code

    <FORM>
    <INPUT TYPE = "RADIO" NAME = "radio">
    <INPUT TYPE = "RADIO" NAME = "radio">
    <INPUT TYPE = "RADIO" NAME = "radio">
    </FORM>

Notice that the Radio Button widget is specified as an input TYPE of "RADIO" and that every radio button in a radio group shares the same NAME.
The Radio Button widget also has several other attributes that affect how it works. The following table outlines them:

Attribute	Description
TYPE	Specifies the type of interface widget. For a radio button widget, you use "RADIO"
NAME	Specifies the variable name associated with this widget
VALUE	Specifies the VALUE that will be sent in the URL-encoded string if the radio button is checked. If it is not checked, neither the name nor the value will be part of the URL-encoded string.
CHECKED	Specifies that the radio button will be checked by default. It is recommended that you check one (but never more than one) option by default.

Let's take a closer look at each of these attributes.

The NAME and VALUE attributes

The NAME and VALUE attributes are essential and allow you to specify the name and value portion of the name/value pair that is sent as part of the URL-encoded string. For example, consider the following radio buttons:

Here is the code that we used to make them.

    <FORM>
    <TABLE BORDER = "1">
    <TR>
    <TD>Apples</TD>
    <TD><INPUT TYPE  = "RADIO" 
               NAME  = "fruit" 
               VALUE = "apples"></TD>
    </TR>

    <TR>
    <TD>Oranges</TD>
    <TD><INPUT TYPE = "RADIO" 
               NAME = "fruit" 
               VALUE= "oranges"></TD>
    </TR>

    <TR>
    <TD>Pears</TD>
    <TD><INPUT TYPE = "RADIO" 
               NAME = "fruit" 
               VALUE= "pears"></TD>
    </TR>
    </TABLE>
    </FORM>

Notice that you can only check one radio button at one time.
Notice also that with radio buttons (unlike check boxes), the NAME value will be the same for all choices within a radio group. If you use a different name, you will be able to select more than one choice at a time and then the radio button is essentially a check box that you do not want.
Finally notice that the VALUE is used to specify which choice was selected. Thus, if the user selected Apples, the URL-encoded string would look like the following:

    fruit=apples

The CHECKED Attribute

The CHECKED attribute allows you to set the state of the radio button to "on" by default. You will want to set one radio button in a radio button group to CHECKED, but make sure that only one is checked. Take a look at the following example:

And here is the code that we used to make that radio group.

    <FORM>
    <TABLE BORDER = "1">
    <TR>
    <TD>Download JDK 1.1.4 for Java</TD>
    <TD><INPUT  TYPE = "RADIO" 
                NAME = "java_kit" 
                VALUE= "jdk_114"
                >
    </TD>
    </TR>

    <TR>
    <TD>Download JDK 1.0.2 for Java</TD>
    <TD><INPUT  TYPE = "RADIO"
                NAME = "java_kit" 
                VALUE= "jdk_102"
                >
    </TD>
    </TR>

    <TR>
    <TD>Download the AFC for Java</TD>
    <TD><INPUT  TYPE = "RADIO" 
                NAME = "java_kit" 
                VALUE= "afc" CHECKED>
    </TD>
    </TR>
    </TABLE>
    </FORM>

The Check Box Widget
Table of Contents
Non Input-based GUI Widgets

Graphics & Media Lab. >> Áèáëèîòåêà | Êóðñû | Ãðàôèêîí

Hosted by Graphics & Media Lab
http://graphics.cs.msu.su

mailto: Laboratory