Using Other Form Controls

In addition to form controls you can create using the input element, there are three that are elements in and of themselves.

Using the button Element

A button you create using the button element is similar to the buttons you create with the input element, except that content included between the opening and closing button tags appears on the button.

Note

The button element (as opposed to the input element of type="button") is not supported by versions of Netscape prior to version 6.

You can create three different types of buttons: Submit, Reset, and Custom. The <button> tag is used to create buttons. As with other form fields, you can use the name attribute to specify the parameter sent to the server, and the value attribute to indicate which value is sent to the server. Unlike buttons created with the <input> tag, the button's label is specified by the content within the <button> tag, as seen in this code:

Input

<button type="submit"><b><i>Submit button</i></b></button> <button type="custom"><img src="/books/2/631/1/html/2/recycle.gif"></button>

The button element is shown in a browser in Figure 10.11.

Output

Figure 10.11. The button element provides a more flexible way to create form buttons.

With the <button> tag, white space counts. If you include white space between the opening or closing <button> tags and the content inside the tag, it might make your button look a bit odd. The best bet is to just leave out that white space.

Creating Large Text-Entry Fields with textarea

The textarea element creates a large text entry field where people can enter as much information as they like. To create a textarea, use the <textarea> tag. To set the size of the field, use the rows and cols attributes. These attributes specify the height and width of the text area in characters. A text area with cols set to 5 and rows set to 40 creates a field that's 5 lines of text high and 40 characters wide. If you leave out the rows and cols attributes, the browser default will be used. This can vary, so you should make sure to include those attributes to maintain the form's appearance across browsers. The closing textarea tag is required and any text you place inside the textarea tag is displayed inside the field as the default value:

Input

<p>Please comment on our customer service.<br /> <textarea name="question4" rows="10" cols="60">Enter your answer here </textarea> </p>

Figure 10.12 shows a textarea element in action.

Output

Figure 10.12. Use textarea to create large textentry areas.

Tip

You can also change the size of a textarea with the height and width CSS properties. (You can also alter the font using the CSS font properties as well.)

Creating Menus with select and option

The select element creates a menu that can be configured to enable users to select one or more options from a pull-down menu or a scrollable menu that shows several options at once. The <select> tag defines how the menu will be displayed and the name of the parameter associated with the field. The <option> tag is used to add selections to the menu. The default appearance of select lists is to display a pull-down list that enables the user to select one of the options. Here's an example of how one is created:

Input

<p>Please pick a travel destination: <select name="location">   <option>Indiana</option>   <option>Fuji</option>   <option>Timbuktu</option>   <option>Alaska</option> </select> </p>

As you can see in the code, the field name is assigned using the name attribute of the <select> tag. The field created using that code appears in Figure 10.13.

Output

Figure 10.13. You can use select form controls to create pull-down menus.

To create a scrollable list of items, just include the size attribute in the opening select tag, like this:

Input

<select name="location" size="3">

Figure 10.14 shows the same select element as Figure 10.13, except that the size attribute is set to 3. Setting the size to 3 indicates that the browser should display three options at once.

Output

Figure 10.14. You also can create scrollable lists using the select element.

To see the fourth item, the user would have to use the scrollbar built into the select list. By default, the value inside the <option> tag specifies both what is displayed in the form and what's sent back to the server. To send a value other than the display value to the server, use the value attribute. The following code, for example, causes bw499 to be submitted to the server as the value associated with the Courses field instead of Basket Weaving 499:

<select name="courses">   <option value="p101">Programming 101</option>   <option value="e312">Ecomomics 312</option>   <option value="pe221">Physical Education 221</option>   <option value="bw499">Basket Weaving 499</option> </select>

To select an option by default, include the selected attribute in an option element, as in the following:

<select name="courses">   <option value="p101">Programming 101</option>   <option value="e312">Ecomomics 312</option>   <option value="pe221" selected="selected">Physical Education 221</option>   <option value="bw499">Basket Weaving 499</option> </select>

Thus far, you've created menus from which a user can select only one choice. To enable users to select more than one option, use the multiple attribute:

<select name="courses" multiple="multiple">

Note

A user can choose multiple options by Shift+clicking for Windows, or Ctrlclicking or Commandclicking for Macintosh.

There are some usability issues associated with select lists. When you think about it, select lists that enable users to choose one option are basically the equivalent of radio button groups, and select lists that allow multiple selections are the same as check box groups. It's up to you to decide which tag to use in a given circumstance. If you need to present the user with a lot of options, select lists are generally the proper choice. A select list with a list of states is a lot more concise and usable than a group of 50 radio buttons. By the same token, if there are four options, radio buttons probably make more sense. The same rules basically hold with check box groups versus multiple select lists.

The other usability issue with select lists is specific to multiple select lists. The bottom line is that they're hard to use. Most users don't know how to select more than one item, and if the list is long enough, as they move through the list they'll have problems keeping track of the items they already selected when they scroll through to select new ones. Sometimes there's no way around using a multiple select list, but you should be careful about it.

Task: Exercise 10.2. Using Several Types of Form Controls

Form controls often come in bunches. Although there are plenty of forms out there that consist of a text input field and a Submit button (like search forms), a lot of the time forms consist of many fields. For example, many websites require that you register in order to see restricted content, download demo programs, or participate in an online community. In this example, we'll look at a perhaps slightly atypical registration form for a website.

The purpose of this exercise is to show you how to create forms that incorporate a number of different types of form controls. In this case, the form will include a text field, a radio button group, a select list, a check box group, a file upload field, and a text area. The form is laid out using a table. Even though CSS is superior to tables for laying out most kinds of pages, forms are still well suited to being laid out using tables. The form, rendered in a browser, appears in Figure 10.15.

Figure 10.15. A registration form for a website.

Let's look at the components used to build the form. The page's header and body tag are what you would expectnothing interesting. After some introductory text, we open the form like this:

<form action="/cgi-bin/register.cgi" method="post" enctype="multipart/form-data">

Because this form contains a file upload field, we have to use the post method and the multipart/form-data enctype in the <form> tag. The action attribute points to a CGI script that lives on my server. Next, we open the table that will be used to format the controls in my form. The first row of the table contains the first row in the form:

<tr> <td align="right"><b>Name:</b></td> <td><input name="name" /></td> </tr>

As you can see, the table has two columns. We use the left column for labels and the right column for the form controls themselves. The first field is a text field. The only attribute included is name because the default values for the rest of the attributes are fine.

The next row includes two radio buttons:

<tr> <td align="right"><b>Gender:</b></td> <td> <input type="radio" name="gender" value="male" /> male <input type="radio" name="gender" value="female" /> female </td> </tr>

As you can see, the radio button group includes two controls (both with the same name, establishing the group). Because we didn't include line breaks between the two fields, they appear side by side in the form. The next field is a select list that enables the user to indicate which operating system he runs on his computer:

<tr> <td align="right">Operating System:</td> <td><select name="os"> <option value="windows">Windows</option> <option value="macos">Mac OS</option> <option value="linux">Linux</option> <option value="other">Other ...</option> </select></td> </tr>

This select list is a single-line, single-select field with four options. Rather than using the display values as the values that will be sent back to the server, we instead opt to set them specifically using the value attribute of the <option> tag. The next form field is a check box group:

<tr> <td valign="top" align="right">Toys:</td> <td><input type="checkbox" name="toy" value="digicam" /> Digital Camera<br /> <input type="checkbox" name="toy" value="mp3" /> MP3 Player<br /> <input type="checkbox" name="toy" value="wlan" /> Wireless LAN</td> </tr>

The next field is a file upload field:

<tr> <td align="right">Portrait:</td> <td><input type="file" name="portrait" /></td> </tr>

The use of the post method and the multipart/form-data enctype are necessitated by the file upload field. The last input field on the form is a text area intended for the user's bio.

<tr> <td valign="top" align="right">Mini Biography:</td> <td><textarea name="bio" rows="6" cols="40"></textarea></td> </tr>

After the text area, there's just the Submit button for the form. After that, it's all closing tags for the <table> tag, <form> tag, <body> tag, and the <html> tag. The full source code for the page follows, along with a screenshot of the form as shown earlier in Figure 10.15.

Input

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Registration Form</title> </head> <body> <h1>Registration Form</h1> <p>Please fill out the form below to register for our site. Fields with bold labels are required.</p> <form action="/cgi-bin/register.cgi" method="post" enctype="multipart/form-data"> <table> <tr> <td align="right"><b>Name:</b></td> <td><input name="name" /></td> </tr> <tr> <td align="right"><b>Gender:</b></td> <td> <input type="radio" name="gender" value="male" /> male <input type="radio" name="gender" value="female" /> female </td> </tr> <tr> <td align="right"><b>Operating System:</b></td> <td><select name="os"> <option value="windows">Windows</option> <option value="macos">Mac OS</option> <option value="linux">Linux</option> <option value="other">Other ...</option> </select></td> </tr> <tr> <td valign="top" align="right">Toys:</td> <td><input type="checkbox" name="toy" value="digicam" /> Digital Camera<br /> <input type="checkbox" name="toy" value="mp3" /> MP3 Player<br /> <input type="checkbox" name="toy" value="wlan" /> Wireless LAN</td> </tr <tr> <td align="right">Portrait:</td> <td><input type="file" name="portrait" /></td> </tr> <tr> <td valign="top" align="right">Mini Biography:</td> <td><textarea name="bio" rows="6" cols="40"></textarea></td> </tr> <tr> <td colspan="2" align="right"><input type="submit" value="register" /></td> </tr> </table> </form> </body> </html>