start page | rating of books | rating of authors | reviews | copyrights

Book HomeWebmaster in a Nutshell, 3rd EditionSearch this book

6.4. The <select> Tag

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.

By placing a list of <option> tagged items inside the <select> tag of a form, you 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 the user doesn't select any, 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.

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 determines how many options are visible to the user at one time. The value of size should be a positive integer. If size is set to 1 and multiple is not specified, the <select> list is typically implemented as a pop-up menu, while values greater than 1 or specifying the multiple attribute cause the <select> to be displayed as a scrolling list.

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.

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.

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 preselect the first option if no option is explicitly preselected.



Library Navigation Links

Copyright © 2003 O'Reilly & Associates. All rights reserved.