0
0
HTMLmarkup~5 mins

Select dropdown in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.