[Chapter 10] 10.4 Multiple Choice Elements

10.4 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.

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.

As with other form tags, the name attribute is required and used by the browser when submitting the <select> choices to the server. Unlike radio buttons, however, no item is preselected, so if none is selected, no values are sent to the server when the form is submitted. Otherwise, the browser submits the selected item or collects multiple selections, each separated with commas, into a single parameter list and includes the name attribute when submitting <select> form data to the server.

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> to behave like an <input type=checkbox> element. If multiple is not specified, exactly one option can be selected at a time, just like a group of radio buttons.

The size attribute

The size attribute determines how many options are visible to the user at one time. The value of size should be a positive integer. The default value is 1 when size isn't specified. At size=1, if multiple is not specified, the browser typically displays the <select> list as a pop-up menu. Size values greater than one or by specifying the multiple attribute causes the <select> to be displayed as a scrolling list.

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

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

The result is shown in Figure 10.5, along with the change in appearance when the size attribute is set to 1 and multiple is not specified.

Figure 10.5: A `<select>` element, formatted with size=1 (left) and size=3 (right)

[Graphic: Figure 10-5]

Form `<select>` event handlers

JavaScript browsers support four event handlers for the <select> tag type. Use the onFocus, onBlur, onChange, and onSelect event handlers, respectively, to execute a JavaScript program when the user moves the mouse into the <select> element, when the user moves away from the element, when the user has changed the value of the element, and when the user selects the element.

The value of the event handler attribute is--enclosed in quotation marks--one or a sequence of semicolon-separated JavaScript expressions, methods, and function references that the browser executes when the event occurs. For example, you might associate a window alert via the onFocus event with the text area to relay some instructions to the user on what information they should type into that area. See 13.3.3 for more information about JavaScripting and event handlers.

The style and class attributes

The style attribute for the <select> tag creates an inline style for the text enclosed by the tag, overriding any other style rule in effect. The class attribute lets you format the content according to a predefined class of the <select> tag; its value is the name of that class. Be aware that few style properties affect the form element itself, and none affect its internal contents. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"].

The `<option>` Tag

Use the <option> tag to define each item within a <select> form element.

The browser displays the <option> tag's contents as an element within the <select> tag's menu or scrolling list, so the content must be plain text only, without any other sort of markup.

The value attribute

Use the value attribute to set a value for each option the browser sends to the server if that option is selected by the user. 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 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.

The selected attribute

By default, all options within a multiple-choice <select> tag are unselected. Include the selected attribute (no value) inside the <option> tag to preselect one or more options, which the user may then deselect. Single-choice <select> tags will preselect the first option if no option is explicitly preselected.

The style and class attributes

The style attribute for the <option> tag creates an inline style for the text enclosed by the tag, overriding any other style rule in effect. The class attribute lets you format the content according to a predefined class of the <option> tag; its value is the name of that class. Be aware that few style properties affect the form element itself, and none affect its internal contents. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"].