Section 9.8. Multiple-Choice Elements


9.8. Multiple-Choice Elements

Checkboxes and radio buttons give you powerful means for creating multiple-choice questions and answers, but they can lead to long forms that are tedious to write and put a fair amount of clutter onscreen. The <select> tag gives you two compact alternatives: pull-down menus and scrolling lists.

9.8.1. The <select> Tag

By placing a list of <option> -tagged items inside the <select> tag of a form, you magically create a pull-down menu of choices. Figure 9-2, earlier in this chapter, displays a <select> pull-down menu.

<select>

Function

Creates single- and multiple-choice menus

Attributes

class , dir , disabled , id , lang , multiple , name , notab , onBlur , onChange , onClick , onDblClick , onFocus , onKeyDown , onKeyPress , onKeyUp , onMouseDown , onMouseMove , onMouseOut , onMouseOver , onMouseUp , size , style , tabindex , taborder , title

End tag

</select> ; never omitted

Contains

select_content

Used in

form_content



As with other form tags, the name attribute is required and used by the browser when submitting the <select> choices to the server. Unlike with radio buttons, no item is preselected, so if the user doesn't select one, the browser doesn't send any value to the server with the submitted form.

Otherwise, the browser submits the selected item with the name attribute value when submitting <select> form data to the server.

9.8.1.1. The multiple attribute

To allow more than one option selection at a time, add the multiple attribute to the <select> tag. This causes the <select> element to behave like an <input type=checkbox> element. When submitted, the browser collects the multiple selections, separated with commas, into a single parameter list, such as:

 pets=dog,cat,mouse 

If you don't include the multiple attribute, the user may select only one option at a time, just like in a group of radio buttons.

9.8.1.2. The size attribute

The size attribute determines how many options are visible to the user at a time. The value of size should be a positive integer. The default value is 1. When size=1 without multiple , the browser typically displays the <select> list as a pop-up menu. With size values greater than 1 or with multiple , the browser typically displays the <select> element's contents as a scrolling list.

In the following XHTML example, we've converted our previous checkbox example into a scrolling, multiple-choice menu. Notice that the size attribute tells the browser to display three options at a time: [*]

[*] Notice the </option> end tags. They are not usually included in standard HTML documents but must appear in XHTML.

 What pets do you have?   <select name="pets" size="3" multiple="multiple">     <option>Dog</option>     <option>Cat</option>     <option>Bird</option>     <option>Fish</option>   </select> 

The result is shown in Figure 9-6.

Figure 9-6. A <select> element, formatted with size=3

9.8.2. The <option> Tag

Use the <option> tag to define each item within a <select> form control. The browser displays the <option> tag's contents as an element within the <select> tag's menu or scrolling list, so the contents must be plain text only, without any other sort of markup.

<option>

Function

Defines available options within a <select> menu

Attributes

class , dir , disabled , id , label , lang , onClick , onDblClick , onKeyDown , onKeyPress , onKeyUp , onMouseDown , onMouseMove , onMouseOut , onMouseOver , onMouseUp , selected , style , title , value

End tag

</option> ; usually omitted in HTML

Contains

plain_text

Used in

select_content



9.8.2.1. The value attribute

Use the value attribute to set a value for each option the browser sends to the server if the user selects that option. If the value attribute has not been specified, the value of the option is set to the content of the <option> tag. As an example, consider these HTML options:

 <option value=Dog>Dog <option>Dog 

Both have the same value. The first is explicitly set within the <option> tag; the second defaults to the content of the <option> tag itself: "Dog".

9.8.2.2. The selected attribute

By default, all options within a multiple-choice <select> tag are unselected and therefore not included in the parameters list when the client submits the form to the server. Include the selected attribute inside the <option> tag to preselect one or more options, which the user may then deselect.

The HTML version of the selected attribute has no value; the XHTML version has the value selected="selected" . Single-choice <select> tags preselect the first option if no option is explicitly preselected.

9.8.2.3. The label attribute

Normally, the browser creates a label from the contents of the <option> tag when displaying it to the user. If the label attribute is supplied, its value is used as the label instead.

9.8.3. The <optgroup> Tag

Menus of choices in forms can be quite large, making them difficult to display and use. In these cases, it is helpful to group related choices, which can then be presented as a set of nested, cascading menus to the user. Introduced in HTML 4.0, the <optgroup> tag brings this capability to HTML and XHTML forms, albeit in a limited way.

You can use the <optgroup> tag only within a <select> tag, and it may contain only <option> tags. The browser creates submenus for each <optgroup> tag within the main <select> menu.

For example, with HTML you might use <optgroup> to present a form menu of states organized by region (Figure 9-7):

Figure 9-7. The <optgroup> tag helps organize form <select> menus

 <select name=state>    <optgroup label=Northeast>       <option>Maine       <option>New Hampshire       ...    </optgroup>    <optgroup label=South>       <option>Florida       <option>Georgia    </optgroup>    ... </select> 

Like that shown for Opera in Figure 9-7, the other popular GUI browsers similarly indent the <optgroup> items within a scrolling menu, though the others italicize and make the group headers bold.

The biggest drawback to the <optgroup> tag is that it cannot be nested, limiting you to one level of submenus. Presumably, this restriction will be lifted in a future version of XHTML.

<optgroup>

Function

Groups related <option> elements within a <select> menu

Attributes

class , dir , disabled , id , label , lang , onClick , onDblClick , onKeyDown , onKeyPress , onKeyUp , onMouseDown , onMouseMove , onMouseOut , onMouseOver , onMouseUp , style , title

End tag

</optgroup> ; may be omitted in HTML

Contains

optgroup_content

Used in

select_content



9.8.3.1. The label attribute

Use the label attribute to define an <optgroup> submenu title to the user. You should keep the label short and to the point to ensure that the menu can be displayed easily on a large variety of displays.



HTML & XHTML(c) The definitive guide
Data Networks: Routing, Security, and Performance Optimization
ISBN: 596527322
EAN: 2147483647
Year: 2004
Pages: 189
Authors: Tony Kenyon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net