Select dropdown in HTML

Introduction

A select dropdown lets users pick one option from a list. It saves space and makes choices clear.

When you want users to choose their country from a list.

When selecting a preferred language on a website.

When picking a size for a product before buying.

When choosing a date or time from preset options.

Syntax

HTML

<select name="example">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

The <select> tag creates the dropdown.

Each <option> inside it is a choice the user can pick.

Examples

A simple dropdown to pick a fruit.

HTML

<select name="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

Dropdown with an accessible label for screen readers.

HTML

<select name="colors" aria-label="Choose a color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

A disabled dropdown that users cannot interact with.

HTML

<select name="cars" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

Sample Program

This example shows a labeled dropdown to pick a pet. It uses accessible labels and simple styling. The dropdown is keyboard friendly and visually clear.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select Dropdown Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      background-color: #f9f9f9;
    }
    label {
      font-weight: 600;
      margin-right: 0.5rem;
    }
    select {
      padding: 0.4rem 0.6rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 0.3rem;
      background-color: white;
      cursor: pointer;
    }
    select:focus {
      outline: 2px solid #007acc;
      outline-offset: 2px;
    }
  </style>
</head>
<body>
  <form>
    <label for="pet-select">Choose a pet:</label>
    <select id="pet-select" name="pets" aria-label="Choose a pet">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
    </select>
  </form>
</body>
</html>

Important Notes

Always use a <label> with for attribute matching the id of the <select> for accessibility.

Use aria-label if you cannot use a visible label.

Keyboard users can open the dropdown with space or enter keys and navigate options with arrow keys.

Summary

The <select> tag creates a dropdown list.

Use <option> tags inside to list choices.

Always label your dropdown for everyone to understand and use it easily.

Practice

1. What does the <select> tag do in HTML?

easy

A. Creates a dropdown list for users to choose from

B. Creates a text input box

C. Creates a button

D. Creates a paragraph

Solution

1. Step 1: Understand the purpose of the <select> tag

   The <select> tag is designed to create a dropdown list where users can pick one option from many.

2. Step 2: Compare with other tags

   Other tags like <input> create text boxes, <button> creates buttons, and <p> creates paragraphs, so they do not create dropdowns.

3. Final Answer:

   Creates a dropdown list for users to choose from -> Option A

4. Quick Check:

   <select> = dropdown list [OK]

Hint: Remember: <select> always means dropdown [OK]

Common Mistakes:

• Confusing <select> with <input>
• Thinking <select> creates buttons
• Mixing <select> with paragraph tags

2. Which of the following is the correct way to add options inside a dropdown?

easy

A. <button>Choice 1</button>

B. <select>Choice 1</select>

C. <input>Choice 1</input>

D. <option>Choice 1</option>

Solution

1. Step 1: Identify the tag used for dropdown options

   The <option> tag is used inside <select> to list choices.

2. Step 2: Check other tags

   <select> is for the dropdown container, <input> and <button> are unrelated to dropdown options.

3. Final Answer:

   <option>Choice 1</option> -> Option D

4. Quick Check:

   Options inside dropdown = <option> [OK]

Hint: Options inside dropdown use <option> tags [OK]

Common Mistakes:

• Putting options directly inside <select> without <option>
• Using <input> or <button> instead of <option>
• Closing with which is invalid

3. What will the following HTML render in the browser?

<label for="fruits">Choose a fruit:</label>
<select id="fruits" name="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

medium

A. A dropdown labeled 'Choose a fruit:' with options Apple, Banana, Cherry

B. A text box labeled 'Choose a fruit:'

C. Three buttons labeled Apple, Banana, Cherry

D. A paragraph with the text 'Choose a fruit:' and a list of fruits

Solution

1. Step 1: Analyze the label and select tags

   The <label> is linked to the <select> by the 'for' and 'id' attributes, showing 'Choose a fruit:' as the label.

2. Step 2: Understand the <select> content

   The <select> contains three <option> tags: Apple, Banana, and Cherry, which appear as choices in a dropdown.

3. Final Answer:

   A dropdown labeled 'Choose a fruit:' with options Apple, Banana, Cherry -> Option A

4. Quick Check:

   Label + select with options = dropdown with label [OK]

Hint: Label + select with options = dropdown list [OK]

Common Mistakes:

• Thinking it creates buttons instead of dropdown
• Confusing label with placeholder text
• Expecting a text input instead of dropdown

4. Identify the error in this dropdown code:

<select name="colors">
  <option>Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue
</select>

medium

A. The <select> tag cannot have multiple options

B. The name attribute is invalid on <select>

C. Missing closing tag for the last <option>

D. Options cannot have a value attribute

Solution

1. Step 1: Check the last option tag

   The last <option> for Blue is missing its closing </option> tag, which is required for valid HTML.

2. Step 2: Verify other parts

   The name attribute is valid on <select>, options can have value attributes, and multiple options are allowed.

3. Final Answer:

   Missing closing tag for the last <option> -> Option C

4. Quick Check:

   All <option> tags must be closed [OK]

Hint: Always close each <option> tag properly [OK]

Common Mistakes:

• Forgetting to close <option> tags
• Thinking name attribute is invalid on <select>
• Believing options can't have values

5. You want to create a dropdown for selecting a country with these requirements:
- The dropdown must have a label for accessibility.
- The default visible option should say 'Select a country' and not be selectable.
- Options: USA, Canada, Mexico.
Which code snippet meets all these requirements?

hard

A. <select name="country">
<option>Select a country</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>

B. <label for="country">Country:</label>
<select id="country" name="country">
<option value="" disabled selected>Select a country</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>

C. <label>Country</label>
<select id="country">
<option value="" selected>Select a country</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>

D. <label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select a country</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>

Solution

1. Step 1: Check for label linked to select

   <label for="country">Country:</label> <select id="country" name="country"> <option value="" disabled selected>Select a country</option> <option value="usa">USA</option> <option value="canada">Canada</option> <option value="mexico">Mexico</option> </select> uses <label for="country"> and <select id="country">, linking label and dropdown for accessibility.

2. Step 2: Verify default option is disabled and selected

   The first option in A has disabled selected attributes, so it shows as default but cannot be chosen.

3. Step 3: Confirm options list

   Options USA, Canada, Mexico are correctly listed with values.

4. Final Answer:

   This code snippet meets all requirements -> Option B

5. Quick Check:

   Label + disabled selected default option = accessible dropdown [OK]

Hint: Use disabled and selected on default option with label [OK]

Common Mistakes:

• Not linking label with select using for and id
• Default option not disabled, so selectable
• Missing selected attribute on default option