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>
<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.
0 comments:
Post a Comment