Exploring Form Input Controls

Various input controls are available for retrieving information from the user. You've already learned about some text entry options for forms. The next few sections introduce you to most of the remaining form input options you can use to design forms.

Check Boxes

The simplest input type is a check box, which appears as a small square the user can select or deselect by clicking; a check box functions as an on/off switch. You must give each check box a name via the name attribute. If you want a check box to be checked by default when the form comes up, include the checked attribute. For example, the following code creates two check boxes:

 <input type="checkbox" name="baby" checked="checked" />Baby Grand Piano<br /> <input type="checkbox" name="mini" />Mini Piano Stool 

Did you Know?

If you find that the label for an input element is displayed too close to the element, just add a space between the close of the <input /> tag and the start of the label text, like this:

 <input type="checkbox" name="mini" /> Mini Piano Stool 

The check box labeled Baby Grand Piano is checked in this example. (The user would have to click it to turn it off if he didn't want a piano.) The one marked Mini Piano Stool would be unchecked to begin with, so the user would have to click it to turn it on.

When the form is submitted, selected check boxes appear in the form result:

 baby=on 

Blank (deselected) check boxes do not appear in the form output at all.

Watch Out!

XHTML requires all attributes to have an equal sign followed by a value. This explains why I've used checked="checked" to indicate that a check box is checked, as opposed to just checked. This rule applies to all Boolean (TRue/false, on/off, yes/no, and so on) attributes that you may come across in HTML.

Did you Know?

You can use more than one check box with the same name, but with different values, as in the following code:

 <input type="checkbox" name="pet" value="dog"> dog<br /> <input type="checkbox" name="pet" value="cat"> cat<br /> <input type="checkbox" name="pet" value="iguana"> iguana 

If the user checks both Cat and Iguana, the submission result includes the following:

 pet=cat pet=iguana 

Radio Buttons

Radio buttons, for which only one choice can be selected at a time, are almost as simple to implement as check boxes. Just use type="radio" and give each of the options its own <input /> tag, but use the same name for all the radio buttons in a group:

 <input type="radio" name="card" value="v" checked="checked" /> Visa<br /> <input type="radio" name="card" value="m" /> MasterCard 

The value can be any name or code you choose. If you include the checked attribute, that button is selected by default. (No more than one radio button with the same name can be checked.)

If the user selects MasterCard from the preceding radio button set, the following is included in the form submission to the server script:

 card=m 

If the user doesn't change the default checked selection, card=v is sent instead.

Selection Lists

Both scrolling lists and pull-down pick lists are created with the <select> tag. You use this tag together with the <option> tag, as this example reveals:

 <select name="extras" size="3" multiple="multiple">   <option selected="selected">Electric windows</option>   <option>AM/FM Radio</option>   <option>Turbocharger</option> </select> 

No HTML tags other than <option> and </option> should appear between the <select> and </select> tags.

Unlike the text input type, the size attribute here determines how many items show at once on the selection list. If size="2" were used in the preceding code, only the first two options would be visible, and a scrollbar would appear next to the list so that the user could scroll down to see the third option.

Including the multiple attribute allows users to select more than one option at a time, and the selected attribute makes an option initially selected by default. The actual text that accompanies selected options is returned when the form is submitted. If the user selected Electric windows and Turbocharger, for instance, the form results would include the following lines:

 extras=Electric windows extras=Turbocharger 

(As I cautioned you earlier with regard to the checked attribute, XHTML requires you to use multiple="multiple" and selected="selected".)

Did you Know?

If you leave out the size attribute or specify size="1", the list will create a pull-down pick list. Pick lists cannot allow multiple choices; they are logically equivalent to a group of radio buttons. For example, another way to choose between credit card types follows:

 <select name="card">   <option>Visa</option>   <option>MasterCard</option> </select> 

Text Areas

The <input type="text"> attribute mentioned earlier allows the user to enter only a single line of text. When you want to allow multiple lines of text in a single input item, use the <textarea> and </textarea> tags instead. Any text you include between these two tags is displayed as the default entry. Here's an example:

 <textarea name="comments" rows="4" cols="20">Please send more information. </textarea> 

As you probably guessed, the rows and cols attributes control the number of rows and columns of text that fit in the input box. The cols attribute is a little less exact than rows, and approximates the number of characters that fit in a row of text. Text area boxes do have a scrollbar, however, so the user can enter more text than fits in the display area.