An HTML Drop Down Menu Tutorial
Web forms are used on HTML pages to collect data from visitors. Forms allow for several types of input fields including text boxes, radio buttons, check boxes and drop-down menus. Add an HTML drop-down menu to a web form to offer your website visitors many choices in a very limited amount of space. Unlike radio buttons or check boxes where all options are listed on the screen, HTML drop-down menus normally only show one option and hide the rest. A common example of a drop-down menu is state selection where a single drop-down menu can hold the names of all fifty states.
- Difficulty:
- Moderately Easy
Instructions
-
-
1
Create the drop-down menu body using the "select" tag. Begin the drop-down menu with <select> and end the drop-down menu with </select>.
-
2
Select name, size and multiple settings and include these inside the <select> tag.
The "name" setting holds the name of the drop-down menu. The "size" setting allows you to decide how many menu options will show on the screen. The default size is one, but you can create a drop-down menu that shows several options. If the "multiple" argument is set, then the user may select multiple options from the drop-down menu. Leave out the "multiple" setting to create a drop-down menu where users can only select a single option.
The HTML <select> code follows this format:
<select name="yourname" size=2 multiple></select>
In this example, the drop down menu is named "yourname". It will display two options on the screen and visitors will be able to choose multiple options.To create a simple drop down menu where only one option is displayed on the screen and users can only select one option, use the following code:
<select name="yourname"></select>
In this example, the size and multiple arguments are missing so the drop down menu takes on default properties. -
3
Define options for the drop-down menus. Begin each option with the <option> tag and end each one with the </option> tag.
The basic format is as follows:<option value="yourvalue">Green</option>
The value setting names the option for internal processing. The option value is not displayed to the website visitor and only used for web form processing. The words enclosed between the <option> and </option> tags (in this case the word "green") will display on the screen visible to website visitors.
Include one option command for each drop-down menu option. The final drop-down code will look as follows:
<select name="your name">
<option value="one">Green Apples</option>
<option value="two">Yellow Apples</option>
<option value="three">Red Apples</option>
<option value="four">Applesauce</option>
</select> -
4
Give clear instructions above the drop-down menu so the website visitor understands which option to select. If the "multiple" setting is set, instruct the user to select multiple options by clicking the mouse and pressing the "Ctrl" button at the same time.
-
5
Insert the drop-down code into a web form on an HTML page.
Use the following layout:
<html>
<body>
<form name="sample_form" action="http://www.your_domain_name.com/formprocessing.cgi" method="POST">
<p>Select your favorite type of apple from the drop-down menu.</p>
<select name="your name">
<option value="one">Green Apples</option>
<option value="two">Yellow Apples</option>
<option value="three">Red Apples</option>
<option value="four">Applesauce</option>
</select>
</form>
</body>
</html>
-
1
Related Searches
References
- Photo Credit computer problems image by kuhar from Fotolia.com
