Dropdown menus, also called select lists, are similar to both radio buttons and checkboxes, in that they allow a single selection at a time or multiple selections at a time from a pre-defined list of options. They take up less vertical space than multiple radio buttons and check boxes, but not all options are immediately visible.
The <select> and </select> tags are used to create a selection list. Each option inside the menu is defined by the <option> and </option> tags.
<form action="what-to-do-next.php" method="post">
What runs but never walks?
<select>
<option>Light</option>
<option>Snails</option>
<option>Water</option>
<option>Clouds</option>
<option>Cheetahs</option>
</select>
</form>
The result is:
As with other form elements, the name attribute is necessary in order to identify the selection when the form is submitted.
The size attribute allows for more than one option to be initially displayed by adjusting the dropdown menu so that it is shown as a select list.
The "multiple" attribute can allow multiple selections at a time.
<form action="what-to-do-next.php" method="post">
What runs but never walks?
<select name="joke-answer" multiple="yes" size="3">
<option>Light</option>
<option>Snails</option>
<option>Water</option>
<option>Clouds</option>
<option>Cheetahs</option>
</select>
</form>
The result is:
Since multiple="yes" in our above example, holding down the shift key while selecting each option will allow more than one option to be selected.
You can use the <optgroup> element to group together options that are related to one another, to make them easier to go through:
<form action="what-to-do-next.php" method="post">
What runs but never walks?
<select name="joke-answer" multiple="yes" size="3">
<optgroup label="Animals">
<option>Snails</option>
<option>Cheetahs</option>
</optgroup>
<optgroup label="Nature">
<option>Light</option>
<option>Water</option>
<option>Clouds</option>
</optgroup>
</select>
</form>
The result is: