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:

• 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:

  Apples
  Oranges
  Pears

  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:

  Download JDK 1.1.4 for Java
  Download JDK 1.0.2 for Java
  Download the AFC for Java

  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