How to Create a Dropdown in HTML

Use the <select> element when you want users to choose one option from a predefined list. Dropdowns are ideal for country pickers, categories, sizes, filters, and settings where showing every option at once would take too much space.

What you’ll build or solve

You’ll learn how to create a dropdown in HTML with <select> and <option> tags. You’ll also know how to label it clearly and keep the choices easy to scan.

When this approach works best

This approach is the right choice when users should select one value from a fixed set of options.

Common real-world scenarios include:

• Country selectors
• Product size pickers
• Category filters
• Language settings
• Form preference choices

This is a bad idea when users need to type custom text. In that case, use an <input> field instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add a <select> with <option> items

Wrap the dropdown choices inside <select> and place each choice inside its own <option> tag.

<label for="country">Country</label>
<select id="country" name="country">
  <option>Switzerland</option>
  <option>Germany</option>
  <option>Austria</option>
</select>

To add more choices, keep adding more <option> elements inside the same <select>.

<label for="size">T-shirt size</label>
<select id="size" name="size">
  <option>Small</option>
  <option>Medium</option>
  <option>Large</option>
  <option>XL</option>
</select>

What to look for:

• <select> creates the dropdown container
• <option> creates each selectable item
• Add a label for accessibility and clarity
• Use name so the selected value is useful in a form
• Keep all related options inside one dropdown

Examples you can copy

Country selector

<label for="country">Country</label>
<select id="country" name="country">
  <option>Switzerland</option>
  <option>Germany</option>
  <option>Austria</option>
</select>

Product size dropdown

<label for="size">Choose a size</label>
<select id="size" name="size">
  <option>S</option>
  <option>M</option>
  <option>L</option>
</select>

Course category filter

<label for="category">Category</label>
<select id="category" name="category">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

Common mistakes and how to fix them

Mistake 1: Forgetting <option> tags

What the reader might do:

<select>
  HTML
  CSS
</select>

Why it breaks: plain text inside <select> is not treated as valid dropdown choices.

Corrected approach:

<select>
  <option>HTML</option>
  <option>CSS</option>
</select>

Mistake 2: Leaving out the name attribute

What the reader might do:

<select id="country">
  <option>Switzerland</option>
</select>

Why it breaks: the dropdown works visually, but the selected value has no useful key in form submission.

Corrected approach:

<select id="country" name="country">
  <option>Switzerland</option>
</select>

Mistake 3: No label for the dropdown

What the reader might do:

<select id="size" name="size">
  <option>Small</option>
</select>

Why it breaks: users and screen readers may not understand what the dropdown controls.

Corrected approach:

<label for="size">Choose a size</label>
<select id="size" name="size">
  <option>Small</option>
</select>

Troubleshooting

If no options appear, check that every choice uses an <option> tag.

If the selected value is missing in the form, add a name attribute.

If clicking the label does nothing, match the label for value to the dropdown id.

If the dropdown becomes too long, shorten the option labels or group choices more clearly.

Quick recap

• Use <select> to create a dropdown
• Add choices with <option>
• Add a matching <label>
• Use id and name
• Keep all related choices inside one dropdown