Form Fields

The main reason to create a form is to collect data. The fields on a form help you do that. The following sections describe each of the field types and give you some hints for how each one can be customized to suit your needs.

Text Box

The simplest form of data collection is an empty box. Your form poses a question ("What is your name?") and your visitor fills in the answer in the space provided. In HTML, this type of field is called a text box. HTML uses the <input /> command to identify a form field. The following example is a complete HTML form with one field: a text box that is 40 pixels wide and is called Name.

<form action="mailto:[e-mail]" method="post"> <p><b>What is your name?</b></p> <p><input type="text" name="Name"  size="40" /></p> <p><input type="submit" value="Submit" name="submit"       /></p> </form>

The form field's attributes (type, name, id, and size) help to customize the form field. name, id, and size are obvious, but the type attribute could use some explanation. Although this type of field traditionally is called a text box, you also can set the type attribute to password (which displays an asterisk when the user types his or her password). If you know that your visitors will be using Internet Explorer, you could also set the type attribute to integer (which is a whole number without decimals) or number (which can include decimals). One more type, file, is explained in the "File Select" section found later.

Tip

The tabindex attribute, shown within the <input /> tags on Figure 11.2, sets the order in which the user can navigate through the form elements using the Tab key. The tabindex attribute and the index number increases toward the bottom of the form.

Text Area

You use the <textarea> tag to define a multiline text box. In addition to the usual name, id, and tabindex attributes, all <textarea> boxes should control the size of the box using the rows and cols attributes. cols indicates the width of the field in pixels; rows indicates the height of the field.

Anything you type between the <textarea> and </textarea> tags will appear inside the field and can be overwritten by users when they are completing the form. The following example shows the code for a text area box with an initial value of "Enter the address here."

<textarea rows="2" name="address"  cols="30" tabindex="12">Enter the address here.</textarea>

Radio Buttons and Check Boxes

Radio button and check box fields are very similar. In fact, there's really only one difference between them: Your user can select only one item in a radio button list, but can select multiple check box items. Look at the form in Figure 11.1 again. Check boxes are used for the pizza toppings question because it is possible that your visitors might want multiple toppings. Radio buttons are used to ask about the preferred size of the pizza because a pizza can only be one size.

The following example demonstrates how a check box field is created. Notice all the check box fields that relate to the same question ("Pick your toppings") have the same name and id attributes. You use the value attribute to specify the information you will see when the form data is submitted to you. If you don't specify any value, the form data typically will send on/ off or yes/ no values for all fields.

<p><strong>Pick your toppings:</strong><br> <input type="checkbox" name="toppings"    value="sausage" tabindex="7" />     Sausage&nbsp;&nbsp;&nbsp; <input type="checkbox" name="toppings"    value="pepperoni" tabindex="8" />     Pepperoni&nbsp;&nbsp;&nbsp; <input type="checkbox" name="toppings"    value="mushrooms" tabindex="9" />     Mushrooms</p>

With radio buttons, you'll need to use the checked attribute to set a starting value for each field. When you do specify a preselected option, be sure to select the most frequently submitted value. In the following example, the large pizza has been preselected. Users can change that selection when they are completing the form and the form data will be submitted to you with the users' choices selected.

<p><strong>What size pizza would you like?<br></strong>    <input type="radio" value="large" name="size"      checked tabindex="1" />        Large&nbsp;&nbsp;&nbsp;    <input type="radio" value="med" name="size"      tabindex="2" />        Med.&nbsp;&nbsp;&nbsp;    <input type="radio" value="small" name="size"      tabindex="3" />        Small</p>

Drop-Down Option

The drop-down menu option, shown in the following HTML sample, uses a <select> tag to define the overall menu (such as giving it a name, id, and a sizethe number of rows visible at any time). Enclosed within the <select> tag are <option> tags that describe the contents of the drop-down menu. As with radio buttons, you can specify a start value for the drop-down menu using the selected attribute.

<p><strong>What type of crust?</strong>    <select name="crust"  size="1">       <option value="Deep Dish" tabindex="4">          Deep Dish</option>&nbsp;&nbsp;&nbsp;       <option value="Hand-Tossed" tabindex="5">          Hand-Tossed</option>&nbsp;&nbsp;&nbsp;       <option value="Thin &amp; Crispy" tabindex="6">          Thin &amp; Crispy</option>    </select></p>

Drop-Down Default

Some form designers like to add an <option> tag at the top of their drop-down menu fields that tells their users to select one of the items from the list. The following code sample demonstrates how this option would look. Figure 11.4 illustrates this option in an online form.

<option value="Pick">Pick One</option>

Figure 11.4. This drop-down menu includes an extra <option> tag for the Pick One statement.

Like check boxes, your user can hold the Ctrl key to select multiple options in the drop-down menu if you add the multiple attribute to the <select> tag. This change (shown in the following HTML sample) enables users to select multiple options by pressing and holding down the Ctrl key while clicking on the options in the menu. (See Figure 11.5.)

<form action="mailto:[e-mail]" method="post"> <h3>What are your favorite card suit(s)?</h3> <select name="suit"  size="1" multiple="multiple">    <option value="Hearts">Hearts</option>    <option value="Diamonds">Diamonds</option>    <option value="Clubs">Clubs</option>    <option value="Spades">Spades</option> </select> <p><input type="submit" value="Submit your Answer" name="submit"  /> <input type="reset" value="Clear the Form" name="reset"  /></p> </form>

Figure 11.5. Changing the size="1" attribute from the drop-down menu code sample to size="3" enables the visitor to see three options at once. Here, two options have been selected.

File Select

Another useful way to gather information from your visitors is to allow them to send you files. You might use this input option, the file type, to collect résumés, orders, or any other type of file. The following HTML sample demonstrates how this option is created. As you can see in Figure 11.6, the browser creates a Browse button to help your visitors send their files.

<form action="mailto:[e-mail]" method="post"> <p>Send me your resume.</p> <p><input type="file" enctype="multipart/form-data"            name="resume"  /></p> <p><input type="submit" value="send now"            name="submit"  /></p> </form>

Figure 11.6. The visitors will click the Browse button to browse their own file system in search of the appropriate file.

Caution

Check with your Web host before creating this type of form; it might have additional requirements for you.

Buttons

The Submit and Reset buttons are special types of form elements. Although they are created using the <input /> tag (see Figure 11.2), they are not data collection tools, but actually are data submission tools.

• The Submit button collects all the data from the form and posts (sends) it to the location specified in the action portion of the <form> tag.

• The Reset button clears the form of any data that might have already been completed. The Reset button resets the form to the original pre-selected values.

The Submit button is required on all forms, but the Reset button is optional. The browser's Refresh button has the same effect as the Reset button on a form. It reloads the page and deletes everything except the initial values of the form.

Tip

There is one more input type to be aware of: the hidden type. A hidden field is not displayed on the form, but returns results anyway. You might want to collect the date and time the visitor submitted the form, the version of the form that was submitted, or the name of the person who should receive the data. Create the field based on the HTML example that follows:

<input type="hidden" name="version"          value="B" />