Creating a Dropdown Select Menu

To create a dropdown select menu in HTML, use the select element and include several option elements to provide the list of choices.

Dropdown menus can be useful for when you have many options but want to save space on your form. Instead of listing every choice as a separate checkbox or radio button, the user can click the menu to reveal the full list.

The Basic Structure

Each dropdown menu starts with a select tag, which acts as a container for multiple option tags:

Why the `value` Attribute Matters

While the text between the option tags is what the user sees, the value attribute is what the server receives when the form is submitted. It's usually best to use lowercase, simple strings for your values.

Optional Features

You can further customize your select menu using these common attributes:

selected: Add this attribute to an option to make it the default choice when the page loads.
disabled: Prevents the user from selecting a specific option (often used for placeholders like "-- Choose --").
multiple: Allows the user to select more than one option (usually by holding down the Ctrl or Cmd key).

Full Working Example

The following example uses a pre-selected option and a placeholder to create a professional dropdown:

<!DOCTYPE html>
<html>
<head>
<title>Dropdown Select Menu Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
  }
  form {
    background: #f9f9f9;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-width: 300px;
  }
  .form-group {
    margin-bottom: 20px;
  }
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
  }
  select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    font-size: 16px;
  }
</style>
</head>
<body>

<form action="/html/tags/html_form_tag.cfm" method="get">
  <div class="form-group">
    <label for="car-brand">Choose a car brand:</label>
    <select id="car-brand" name="car-brand">
      <option value="">-- Please choose an option --</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes" selected>Mercedes</option>
      <option value="audi">Audi</option>
    </select>
  </div>
  <input type="submit" value="Submit Selection">
</form>

</body>
</html>

View Output Full Screen Preview

Tip: Grouping Options

If you have a very long list of options, you can group them into categories using the optgroup element. This adds a non-selectable bold heading to groups within the dropdown menu, making it easier for users to navigate.