Working with Radio Buttons

Radio buttons are similar to selection lists in that they display a list of choices from which the user makes a selection. Unlike the items in a selection lists, only one radio button can be selected.

Radio buttons use the same <INPUT> tag as input boxes, except that the TYPE property is set to RADIO. The syntax for an individual radio button is:

<INPUT TYPE=RADIO NAME=text VALUE=value

where text is the name assigned to the field containing the radio button, and value is the value of the radio button, which will be sent to the CGI script if that option is selected.

To make a particular radio button the default option, use the following tag:

<SELECT TYPE=RADIO CHECKED>

Because Devilish Delights stockholders want to collect information on the age of the people participating in this contest, they have ask you to make a list of age groups to chose from. For this section you will group ages in categories. The name you'll assigned to this field will be Age Group. For this section, you will use a radio button to make a selection, because you only want the participant to chose one from the list. You have decided to group the ages as follows:

  • 12 and under
  • 13-19
  • 20-30
  • 31-40
  • 41-50
  • 51-60
  • 61-70
  • 71 and above

Return to the contestform.html file in your text editor. Directly above the </TABLE> tag, insert the following lines:

<TR>

<TD VALIGN=TOP>Age Group:</TD>

<TD><INPUT TYPE=RADIO NAME=AGE VALUE=CHILD>12 and under<BR>

<INPUT TYPE=RADIO NAME=AGE VALUE=TEEN>13-19<BR>

<INPUT TYPE=RADIO NAME=AGE VALUE=TWENTIES>20-30<BR>

<INPUT TYPE=RADIO NAME=AGE VALUE=THIRTIES>31-40<BR>

<INPUT TYPE=RADIO NAME=AGE VALUE=FORTIES>41-50<BR>

<INPUT TYPE=RADIO NAME=AGE VALUE=FIFTIES>51-60<BR>

<INPUT TYPE=RADIO NAME=AGE VALUE=SIXTIES>61-70<BR>

<INPUT TYPE=RADIO NAME=AGE VALUE=SEVENTIES>71 and above</TD>

</TR>

The field value sent to the CGI script is located after the value field. The name of the field is "AGE" for all radio buttons in the group. Save your changes and reload the file in your Web browser. Note that the VALIGN=TOP properly causes the table cell containing the text "Age Group:" to be aligned with the top of the cell containing the radio buttons.