The HTML Select and Option Tags - The Menu List

The HTML Select and Option Tags - The Menu List
The select and option tags work together to create a drop-down menu list on a webpage form. You may see this type of list anytime you supply your name and address. If you live in the United States, you choose the state that you live in from a drop-down list of state names. This drop-down list is created with the select tags and the list of choices (options) is created with a group of option tags. The opening and closing tags are required for both the select and option tags.

Here is the sample code for the drop-down menu.

<select name="states">
<option value="OH">Ohio</option>
<option value="FL">Florida</option>
< left angle bracket
select element name
name name attribute is used to set an identification for the menu list
> right angle bracket
</select> closing tag

< left angle bracket
option element name
value value attribute is used to set value for the option
> right angle bracket
</option> closing tag

As you can see, the group of option tags are enclosed within the opening and closing select tags. You can have as many option tags as you want and the drop-down list will scroll as needed.

The Select Tag's Attributes

The Name Attribute
The attribute that you must include in the select tag is the name attribute. This attribute identifies the list to the processing program. If you have more than one drop-down menu in a web form, you will give each list a different name by assigning a different value to the name attribute. In the example, I have set the value of the name attribute to "states".

The Size Attribute
The size attribute specifies the number of options from the list that may be visible at the same time. If I had included all of the states of the United States in the example above, it would be a long list. Therefore, I probably would want to set the size attribute to a smaller number such as 5 which would allow only five of the state names to be visible at one time.

The Multiple Attribute
When this attribute is included in the select tag, more then one option may be selected.

The Option Tag's Attributes

The Value Attribute
The value attribute for the option tag sets a different choice or option to each option tag in the group. When an option tag is selected, the value associated with that tag is sent to the processing program. As you can see from the example, the value assigned to the option tags (OH and FL) are not the same as the name of the states associated with each option tag. The state names will display on the web form but the value sent to the program will be the state abbreviations.

The Selected Attribute
When this attribute is included in the opening option tag, that option will be pre-selected when the web form first displays on the webpage.

This site needs an editor - click to learn more!

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.