logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

The HTML Select and Option Tags - The Menu List

Guest Author - Diane Cipollo

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>
</select>
< 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!

Add The+HTML+Select+and+Option+Tags+%2D+The+Menu+List to Twitter Add The+HTML+Select+and+Option+Tags+%2D+The+Menu+List to Facebook Add The+HTML+Select+and+Option+Tags+%2D+The+Menu+List to MySpace Add The+HTML+Select+and+Option+Tags+%2D+The+Menu+List to Del.icio.us Digg The+HTML+Select+and+Option+Tags+%2D+The+Menu+List Add The+HTML+Select+and+Option+Tags+%2D+The+Menu+List to Yahoo My Web Add The+HTML+Select+and+Option+Tags+%2D+The+Menu+List to Google Bookmarks Add The+HTML+Select+and+Option+Tags+%2D+The+Menu+List to Stumbleupon Add The+HTML+Select+and+Option+Tags+%2D+The+Menu+List to Reddit




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


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor