The University of Texas at Austin- What Starts Here Changes the World
Services Navigation


Menus

Menus are used to allow the user to select one or more of a list of options.

Pull-down menus and scrollable menus are both created with the <select></select> and <option> tags. The SELECT tag has one required attribute, NAME and two optional attributes, SIZE and MULTIPLE. The OPTION tag has two optional attributes, VALUE and SELECTED.

Sample HTML source for a menu:

<select name="menu" size="4" multiple>
<option value="chinese">Chinese Food</option>
<option value="japanese">Japanese Food</option>
<option value="italian">Italian Food</option>
<option value="mexican">Mexican Food</option>
<option value="french">French Food</option>
<option value="thai">Thai Food</option>
<option value="indian">Indian Food</option>
<option value="german">German Food</option>
</select>

See the table below for more examples of menus.


The SELECT Tag

The NAME Attribute (required)

The author of the form assigns a value to the NAME attribute.

The SIZE Attribute (optional)

The SIZE attribute defines the number of options visible at one time. If neither SIZE nor MULTIPLE is used, a pull-down menu is created.

The MULTIPLE Attribute (optional)

The MULTIPLE attribute is used to allow a user to select more than one option from a scrolling menu. All menus with the MULTIPLE attribute are scrolled menus, the SIZE attribute determines how many options are visible simultaneously. If the SIZE attribute is not included, all of the options are visible. The MULTIPLE attribute does not take a value.

On a Macintosh, the user must hold down the "command" or "Apple" key while making selections to choose more than one option. On a Windows computer, the user must hold the "Ctrl" key while making selections.


The OPTION Tag

The OPTION tag is used to define the options of a pull-down or scrolling menu. The OPTION tag takes two optional attributes, VALUE and SELECTED.

The VALUE Attribute (optional)

The author of the web form may specify a VALUE for an OPTION in a menu. If no VALUE is specified, the text following the OPTION tag is used as the form element's value.

The SELECTED Attribute (optional)

The SELECTED attribute indicates that the OPTION should appear pre-selected on the browser's screen. The SELECTED attribute does not take a value.


A note on dynamic pulldowns:

It is recommended that you do not use JavaScript to create dynamic pulldowns in your forms (those that use onChange to submit automatically when the user clicks on an option). This is an accessibility issue because the onChange does not work with keyboard access. When a user tries to move through the options with the arrow keys the JavaScript takes the first click of the arrow key as a selection, so the user always goes to the first selection. This is true for anyone not using a mouse including users who use a screen reader like Jaws.


Example HTML Source Description
<select name="Department-1">
<option>Architecture</option>
<option>Business</option>
<option>Communication</option>
<option>Education</option>
<option>Engineering</option>
</select>

Using just the required elements of the SELECT tag, creates a pull-down menu with the first OPTION automatically selected. The text of the OPTION tag is used as the value of the form element.

To set the default value of a pull-down menu to not be the first value listed, add the SELECTED attribute to the <OPTION> tag of the item which should be the default.

<select name="Department-2">
<option value="arch">Architecture</option>
<option value="bus">Business</option>
<option value="comm" selected="selected">Communication</option>
<option value="edu">Education</option>
<option value="eng">Engineering</option>
</select>
<select name="Department-3" size="4">
<option>Architecture</option>
<option selected="selected">Business</option>
<option>Communication</option>
<option>Education</option>
<option>Engineering</option>
</select>

Using the MULTIPLE attribute or setting the SIZE attribute greater than one creates a scrolled menu box.

When the MULTIPLE attribute is used, users can choose more than one of the options by holding down the Command-Key on a Macintosh or the Control key on a Windows computer when they click on the option with the mouse.

If the SIZE attribute is not specified for a menu box, the browser will draw a box with no scroll bars large enough to fit all the menu items.

<select name="Sport-1" multiple="multiple">
<option>Football</option>
<option selected="selected">Basketball</option>
<option>Baseball</option>
<option>Volleyball</option>
<option selected="selected">Swimming</option>
<option>Diving</option>
</SELECT>
<select name="Sport-2" size="4" multiple="multiple">
<option>Football</option>
<option>Basketball</option>
<option>Baseball</option>
<option>Volleyball</option>
<option>Swimming</option>
<option>Diving</option>
</select>


  Updated 2009 July 10
  Copyright | Privacy | Accessibility
  Contact Us