Beginning HTML5 and CSS3 For Dummies
Book image
Explore Book Buy On Amazon

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:

  • element to name your list.

  • A collection of elements identifies individual list options.

    The value attribute assigns a unique value for each 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 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 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.

About This Article

This article is from the book:

About the book authors:

Ed Tittel is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling HTML For Dummies.

Chris Minnick runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including WebKit For Dummies.

This article can be found in the category: