Online Test Banks
Score higher
See Online Test Banks
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Create Drop-Down List Fields in HTML5

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.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.