Dropdown Menus with the Select Element

Dropdown menus are everywhere online: choosing your country, picking a shirt size, or selecting a payment method. In HTML, one of the easiest ways to make a dropdown is with the <select> element.

In this beginner-friendly guide, you’ll learn what the select element is, how to create a basic dropdown, how to group options, and how to make it more user-friendly. No prior coding experience is needed—just follow along step by step.

What Is the `<select>` Element?

The <select> element creates a dropdown list that users can click to choose an option. Inside the <select> element, you add one or more <option> elements, each representing a single choice.

You’ll often see select elements in forms, where users send information to a website. Even if you’re not ready for full forms yet, learning select is a great first step.

Example 1: Your First Dropdown Menu

Let’s start with the simplest possible dropdown: choosing a favorite color.

Code example

<!-- Example 1: A basic dropdown menu -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Basic Select Example</title>
</head>
<body>
  <label for="color">Choose your favorite color:</label>
  
  <!-- The select element creates the dropdown -->
  <select id="color" name="color">
    <!-- Each option is one choice in the dropdown -->
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>
</body>
</html>

What each part does

<!DOCTYPE html> and <html>...</html>: Basic structure of an HTML page.
<label for="color">...: Text that describes what the dropdown is for.
id="color": A unique identifier for the select element.
name="color": The name used if this value is sent to a server.
<option value="red">Red</option>: Shows “Red” to the user, and the browser sends red as the value.

What you’ll see

Open this file in your browser, and you’ll see a line of text: “Choose your favorite color:” followed by a small dropdown box. When you click it, you’ll see “Red”, “Green”, and “Blue” as choices.

Try it yourself

Change the option text and values. For example:

<option value="yellow">Yellow</option>

Reload the page and check that your new choice appears.

Example 2: Adding a Default Prompt and Required Selection

Right now, one of the colors is selected by default. Sometimes, you want to force the user to make a choice, instead of automatically picking the first option.

We can do that by adding a placeholder option and the required attribute.

Code example

<!-- Example 2: Placeholder and required attribute -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Select with Placeholder</title>
</head>
<body>
  <form>
    <label for="color">Choose your favorite color:</label>
    
    <select id="color" name="color" required>
      <!-- Disabled + selected makes this a non-usable prompt -->
      <option value="" disabled selected>-- Please choose a color --</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>

    <button type="submit">Submit</button>
  </form>
</body>
</html>

What’s new here

<form>...</form>: Wraps the controls so they can be submitted together.
<select ... required>: The user must pick a valid option before submitting.
disabled selected on the first option: This line acts like a prompt instead of a real choice.
<button type="submit">Submit</button>: A button to submit the form (for now, it just reloads the page or shows a message in some browsers).

What you’ll see

The dropdown will initially show -- Please choose a color --. If you hit Submit without choosing one of the real colors, the browser will warn you to make a selection (behavior may vary slightly by browser).

Try it yourself

Change the prompt text to something else, like:

<option value="" disabled selected>Select a color you like most</option>

Reload and see how it changes the user experience.

Example 3: Grouping Options with `<optgroup>`

What if your list is long? For example, imagine choosing a car model from different brands. To make long lists easier to read, you can group related options with <optgroup>.

Code example

<!-- Example 3: Grouping options with optgroup -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Grouped Select Example</title>
</head>
<body>
  <label for="car">Choose a car model:</label>
  
  <select id="car" name="car" required>
    <option value="" disabled selected>-- Select a car model --</option>

    <!-- First group: Toyota models -->
    <optgroup label="Toyota">
      <option value="corolla">Corolla</option>
      <option value="camry">Camry</option>
    </optgroup>

    <!-- Second group: Honda models -->
    <optgroup label="Honda">
      <option value="civic">Civic</option>
      <option value="accord">Accord</option>
    </optgroup>
  </select>
</body>
</html>

What’s happening

<optgroup label="Toyota">: Creates a labeled group inside the dropdown.
Options inside each optgroup are shown under that label.
Users can’t select the group label itself, only the options inside it.

What you’ll see

When you open the dropdown, you’ll see two headings: Toyota and Honda, each with car models underneath. This is much easier to scan than one long, mixed list.

Try it yourself

Add more brands and models. For instance, add this below the Honda group:

<optgroup label="Ford">
  <option value="focus">Focus</option>
  <option value="mustang">Mustang</option>
</optgroup>

Reload and check how the list grows while still staying organized.

Example 4: Styling and Pre-Selected Options

By default, dropdowns use the browser’s look and feel. You can’t fully control their appearance with basic HTML alone, but you can do a few helpful things:

Set a pre-selected option.
Use simple CSS to make the font larger or add spacing.

Code example

<!-- Example 4: Pre-selected option and simple styling -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Styled Select Example</title>
  <style>
    /* Simple CSS to improve appearance */
    label {
      font-family: Arial, sans-serif;
      font-size: 16px;
    }

    select {
      font-size: 16px;      /* Make text larger */
      padding: 4px 8px;     /* Add space inside the box */
      margin-top: 4px;      /* Add a bit of space above */
    }
  </style>
</head>
<body>
  <label for="size">Choose a T-shirt size:</label><br>
  
  <select id="size" name="size">
    <option value="s">Small</option>
    <option value="m" selected>Medium</option> <!-- Pre-selected option -->
    <option value="l">Large</option>
    <option value="xl">Extra Large</option>
  </select>
</body>
</html>

What’s new

The <style>...</style> block adds simple CSS (styling rules).
The selected attribute on the Medium option makes it chosen by default.
padding and font-size on the select element make the dropdown easier to read and click.

What you’ll see

The label and dropdown text will look a bit bigger and cleaner. When the page loads, Medium will already be selected.

Try it yourself

Change which size is pre-selected by moving selected to another option.
Experiment with font-size: 20px; or different padding values in the CSS.

Helpful Tips for Using `<select>`

Here are a few simple guidelines to make your dropdowns more user-friendly:

Always use a label: It tells users what the dropdown is for.
Use clear option text: Avoid confusing abbreviations.
Use a prompt option (like -- Please choose --) when you need a real choice.
Group long lists: Use optgroup to organize related options.
Keep lists short when possible: Very long dropdowns can be hard to use.

You don’t have to do everything perfectly at once. Even a basic labeled select is a solid start.

What’s Next?

You’ve just learned how to:

Create a basic dropdown with <select> and <option>
Add a placeholder and make a selection required
Group related options with <optgroup>
Pre-select an option and add simple styling

If you feel a bit overwhelmed, that’s normal. Learning to code is like learning a new language—it gets easier with practice.

Keep going

Here are some ideas for your next steps:

Build a small survey form with several dropdowns (country, age range, favorite hobby).
Look up how to read the selected value with JavaScript so you can react to user choices.
Explore more CSS to style your forms and make them look more professional.

Most importantly, keep experimenting. Every time you try a new idea, you’re taking another step toward becoming comfortable with HTML and web development.

Mudzinga