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.
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:
<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.
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:
<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.
Figure 10.12. Use textarea to create large textentry areas.
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:
<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.
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:
<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.
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">
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