Placing a Drop-Down List (Selection Menu) on a Form

To allow Web site visitors to choose one or more items from a drop-down list, place a selection menu on the form by inserting the menu options between a set of start and end select tags (<select></select>). Once again, the text title (or label) that describes the purpose of the drop-down menu is not a part of the selection list HTML. The drop-down list’s <select> tag has the following attributes:

• size: The number of menu items (or options) visible onscreen at one time. In the current example (with size=“1”), the form shows only a single item until the site visitor clicks the drop-down list button to the right of the selection menu. If you set the size attribute to a value greater than one (1), the Web browser will display the drop-down list as a list of items (with a scrollbar, if needed) instead of as a single item with a drop-down list button.

• id: Used to assign a unique name to a drop-down list element. You can use the value of the id attribute to refer to the selected status of the items on the selection list within scripts embedded on the Web page.

• name: A name used to identify the drop-down list element on the form. You can use the value of the name attribute to refer to the selected status of items in the selection (or drop-down) list within a script executed by the Web browser. Moreover, the Web browser will pass to the Web server the value of the name attribute as the “name” portion of the name/value pair for each list item the site visitor selects.

• multiple: If the multiple attribute is present in the drop-down list element’s <select> tag, the Web browser will let the site visitor select more than one item from the drop-down list. Otherwise, the Web browser will ensure that the visitor selects only a single item by “deselecting” the previous item selected (if any) when the site visitor clicks a new item on the list. To add the list items to a drop-down list, enclose each item text between start and end option (<option></option>) tags between the list’s start and end selection list tags (<select></select>). Each <option> tag may have the following attributes:

• value: Text string passed to the Web server as the “value” portion of the name/value pair if the site visitor clicks the item in the drop-down menu (or selection list) to select it. The Web browser sends only the name (of the drop-down list) and (option) value (that is, the name/value pair) of the selected list items (or options) to the Web server when the visitor clicks Submit. If the <option> tag has no value attribute, the Web browser will send to the Web server the selection item text (found between the start and end option tags [<option></option>]) as the “value” portion of the name/value pair.

• selected: By including the selected attribute in the <option> tag for an item on the drop-down list, you tell the Web browser to select the item when it draws the selection list and each time the visitor clicks Reset.

The Web browser indicates the selected item(s) in a drop-down list by highlighting it (or them). If the <select> tag does not have a multiple attribute, the site visitor can select only one item from the drop-down list. When the visitor is allowed to choose only one item from the selection list, the Web browser will clear the previous selection (if any) when the visitor clicks a new selection.

To allow the site visitor to select more than one item from the drop-down list, include the multiple attribute in the drop-down list’s <select> tag. Moreover, if you want your site visitors to select more than one item from a drop-down list, be sure to prompt them to make multiple selections with text such as “select all that apply” and “hold down the CTRL key as you click list items to make multiple selections”. (Even if you allow multiple selections, the Web browser will deselect previous selections, if any, if the site visitor clicks a drop-down list item without holding down the CTRL key.)

If you want the visitor to make at least one selection from drop-down list (that is, from the selection menu), be sure to include a blank selection (option) as the first item in the list. That way, if the visitor makes no selection from the list, the form results will have a blank value within the name/value pair for the selection list that the Web browser sends to the Web server. If you do not include a blank item at the beginning of the list, the form results will appear as if the visitor selected the first item on the list—even if the visitor made no selections. See the next Tip for details.