Login | Contact Us | Site Map | Resources

HTML Forms

Home > HTML Tutorial > HTML Dropdown Menus

HTML Dropdown Menus

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 can take up less 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:

What runs but never walks?

Menu Attributes

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:

What runs but never walks?

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.