Creating Radio Buttons

A radio button control is a circular button that is blank when unselected, but filled when selected. You can select only one radio button in a list at a time. You might be wondering why this control is called a radio button. Actually, the name comes from the radio buttons found on old car radios, which let you select a radio station by pressing a button, and then select another station by pressing another radio button (which popped up the previously pressed button). Radio buttons in forms work the same way. Selecting a button will unselect the previously selected button, in other words.

Enter the following code to create a radio button list that lets visitors select their own age group (see Figure 7.4):

<p>What is your age group?</p>
<p><input type="radio" name="Age" value="Under-13">Under
13&#160;&#160;
<input type="radio" name="Age" value="13-19">13 to
19&#160;&#160;
<input type="radio" name="Age" value="20-34">20 to
34&#160;&#160;
<input type="radio" name="Age" value="35-49">35 to
49&#160;&#160;
<input type="radio" name="Age" value="50-64">50 to
64&#160;&#160;
<input type="radio" name="Age" value="Over-65">Over 65</p>
</form>

Figure 7.4: A radio button list works similarly to the buttons on a car radio (selecting one deselects the others).

In this case, the type="radio" attribute specifies that the input control is a radio button. Unlike with text box controls, the same NAME attribute value ("Age") is assigned to all radio button controls within the same group of radio buttons. The VALUE attribute specifies the second part of the name/value pair that is sent when the form data is submitted. For example, if the "20 to 29" radio button is selected, the name/value pair of Age/20–29 will be submitted with the form data.

Initially Selecting a Radio Button

You can specify that a radio button should be selected initially by including a CHECKED attribute in the INPUT element. The CHECKED attribute is a standalone attribute that doesn't take a value. Specify that the "20 to 34" radio button should be initially selected (see Figure 7.5):

<input type="radio" name="Age_Group" value="20-34" checked>20
to 34&#160;&#160;

Figure 7.5: You can set a radio button to be initially selected.

Creating Check Boxes

Check boxes work in a fashion that is similar to radio buttons, except that they are displayed as square boxes (instead of as round buttons) and visitors can select as many as they want. Enter the following code to create a list of check boxes that lets visitors select their field (see Figure 7.6):

<p>What is your field? (<i>Multiple items may be
selected.</i>)</p>
<p><input type="checkbox" name="Field" value="Fin"
checked>Finance&#160;&#160;
<input type="checkbox" name="Field" value="Manu">
Manufacturing&#160;&#160;
<input type="checkbox" name="Field" value="Agri">
Agriculture&#160;&#160;
<input type="checkbox" name="Field" value="Govt">
Government&#160;&#160;
<input type="checkbox" name="Field" value="Sale">
Sales&#160;&#160;
<input type="checkbox" name="Field" value="Heal">Health
Care&#160;&#160;
<input type="checkbox" name="Field" value="Retl">Retail<br>
<input type="checkbox" name="Field" value="Cons">
Construction&#160;&#160;
<input type="checkbox" name="Field" value="Tech">
Technology&#160;&#160;
<input type="checkbox" name="Field" value="Real">Real
Estate&#160;&#160;
<input type="checkbox" name="Field" value="Entr">
Entertainment&#160;&#160;
<input type="checkbox" name="Field" value="Educ">
Education&#160;&#160;
<input type="checkbox" name="Field" value="Othr">
Other&#160;&#160;</p>
</form>

Figure 7.6: Check boxes are similar to radio buttons, except visitors can select as many as they want.

In this case, the type="checkbox" attribute specifies that the input control is a check box. Other than that, check boxes are created the same way as radio buttons. Notice that a CHECKED attribute is included in the first check box's INPUT element, which causes it to be initially checked.

Other Input Controls

Besides text boxes, radio buttons, and check boxes, there are a number of additional input controls that you can create with the INPUT tag. Of these, the most important are the submit, reset, and image controls, which are used to submit form data or reset the form. I cover these later in this session.

There are two other input controls that you might use: hidden and password controls. A hidden control allows you to include a control that submits data, but which will be hidden from the user. Form processing CGI scripts also may require that you specify one or more hidden controls to help direct where your form responses should be sent or specify the address of your confirmation page. A hidden control is specified by a type="hidden" attribute.

FIND IT ONLINE
A password control works like a text box control, except the typed text is displayed as a series of asterisks. A password control is normally used in conjunction with an application (created using CGI or JavaScript), which does not allow a visitor to access a page or folder if they do not know the correct password. A password control is specified by a type="password" attribute. For a selection of password-protection JavaScript scripts that you can cut and paste into your page, see javascript.internet.com/passwords/.