How to Create Drop-Down List Fields in HTML5 - dummies

How to Create Drop-Down List Fields in HTML5

By Ed Tittel, Chris Minnick

Drop-down lists in forms on your website are a great way to give users lots of options in a small amount of screen space. You use two HTML tags to create a drop-down list:

  • <select> creates the list.

    Use a name attribute with the <select> element to name your list.

  • A collection of <option> elements identifies individual list options.

    The value attribute assigns a unique value for each <option> element.

Here’s a markup example for a drop-down list:

<form action="bin/guestbook.php" method="post">
<p>What is your favorite food?</p>
  <select name="food">
    <option value="pizza">Pizza</option>
    <option value="icecream">Ice Cream</option>
    <option value="eggsham">Green Eggs and Ham</option>

The browser turns this markup into a drop-down list with three items, as shown in the figure.


You can also enable users to select more than one item from a drop-down list by changing the default settings of your list:

  • If you want your users to be able to choose more than one option (by holding down the Ctrl [Windows] or Command [Mac] key while clicking options in the list), add the multiple attribute to the <select> tag. The value of multiple is multiple.

    If you give a stand-alone attribute a value, that value must be the same as the name for the attribute itself (that is, both multiple and multiple=”multiple” are legal).

  • By default, the browser displays only one option until the user clicks the drop-down menu arrow to display the rest of the list. Use the size attribute with the <select> tag to specify how many options to show.

    If you specify fewer than the total number of options, the browser includes a scroll bar with the drop-down list.

You can specify that one of the options in the drop-down list be already selected when the browser loads the page, just as you can specify a check box or radio button to be selected. Simply add the selected attribute for the <option> tag you want as the default. Use this when one choice is very likely, knowing that users can override your default selection quickly and easily.