Skip to content

Dropdown

Make a dropdown menu

  • Lesson
  • 1 min read
  • 5 of 8 in this chapter

Dropdown menus are useful if we want the user to pick one of multiple options, like with radio buttons, but if there is a large number of options (it would be confusing to list them all as radio buttons).

Here's an example:

HTML
<label for="color">What's your favorite color?</label>
<select id="color" name="fav-color">
  <option value="red">red</option>
  <option value="orange">orange</option>
  <option value="yellow">yellow</option>
  <option value="green">green</option>
  <option value="blue">blue</option>
  <option value="purple">purple</option>
  <option value="pink">pink</option>
  <option value="black">black</option>
  <option value="gray">gray</option>
  <option value="white">white</option>
  <option value="brown">brown</option>
</select>

The entire dropdown is enclosed in <select> tags. There's a label tag outside of the select tag that has a for attribute, which should be the same as the value of the id attribute for <select>. Each individual option is an option element.