Drop-down and scrolling lists

You can set up a drop-list or a scrolling list. The only difference between the two types of list is the addition of the size attribute that specifies the number of list items shown at any one time. If you leave this attribute out, the browser displays a drop-down list. If you add it, the system displays a scrolling list. You would use a drop-down list if you don’t have much space and a scrolling list if the user can select more than one item or needs to see all the items.

To create a drop-down list use the <select> tag and the <option> tag to define the items in the list.

The width of the list is the width of the longest option in the list. The selected attribute allows you to set one of the choices as the default.

You should assign a name attribute to the <select> tag and value attribute to the <option> tags so that the browser passes the user's choice to the script that processes the form.

To create a scrolling text box use the <select> tag and set the size attribute to something other than 1. Browsers can be a bit fragile if the size is more than 20. You still use the <option> tag to define the items in the list.

Add the multiple attribute to the <select> tag if you want to let the user select more than one option at a time. To select several options, hold down the Ctrl key and click the options with the mouse. To select a range of options, hold down the Shift key and click the start and end of the range with the mouse. (It works like Explorer)

The selected attribute allows you to set one of the choices as the default. If you have also set the multiple attribute, you can make several choices the default.

You should assign a name attribute to the <select> tag and value attribute to the <option> tags so that the browser passes the user's choice to the script that processes the form.

HTML 4.0 also allows you to set up option groups that group <option> tags within a <select> tag. Each group creates a submenu within the main menu. To navigate, select the option group and then the option within the group.

You create option groups with the <optgroup> tag. Here is a pull-down menu with two option groups:

<select size="1">
  <optgroup label="Good fun">
    <option>Holidays
    <option>Parties
    <option>Weekends
  </optgroup>


  <optgroup label="Doom and gloom">
    <option>Work
    <option>Monday morning
    <option>Work
  </optgroup>
</select>

The <optgroup> item must have a label attribute that provides the text label for the corresponding menu item in the parent menu. Since the only content of the <optgroup> group is <option> tags, there is no other way to specify a label for the group.

As far as I know, Internet Explore and Netscape don’t support option groups. Still never mind.

You can also use the name attribute to add an internal name to the field so the program that handles the form can identify the fields.