HTML Drop Down Box Tutorial
Drop-down boxes allow you to have the functions of radio boxes or check boxes in the smaller space. Radio boxes only allow you to choose one option; check boxes allow you to choose more than one option. The options are hidden until the drop-down box is clicked on.
-
The HTML Syntax
-
The syntax for a drop-down box looks like:
<select>
<option>Pennsylvania</option>
<option>New York</option>
<option>New Jersey</option>
<option>Maine</option>
</select>This will create a simple drop-down menu containing the name of the states. Only one state will be able to be chosen.
The <select> tag defines the menu and can include the name, size and multiple options. The name option provides an internal name so that the script that will process the form can identify it. The size option defines the number of items that should be visible. The default for the option value is one visible item. The multiple option allows for multiple selection, if it is included in the select tag.
The <option> tag defines the values in the menu. This tag two options that can defined. The value option defines what will be sent to the processing script. For example if the tag was defined as:
<option value="PA">Pennsylvania</option>
... the value "PA" would be sent instead of "Pennsylvania." The "selected" option defines the value that is selected by default.
Creating a Drop-Down Form
-
Although drop-down boxes are created in html, the values must be processed by a script written in one of the scripting languages such as javascript or PHP. The following example will create a form that will be processed by the "grocery.php" script.
<form action="grocery.php" method ="post">
<select name="grocery" multiple>
<option>Choose your Groceries</option>
<option>bread </option>
<option>milk </option>
<option>cake</option>
<option>chicken breast</option>
<option>roast beef</option>
</select>
<input type=submit value="Shop"/>
</form>This script displays a drop-down menu with the words "Choose Your Groceries" as the visible entry. The user can click on multiple items, which will be sent to the script "grocery.php" for processing when the "Shop" button is pressed.
-
