HTML Guide

Drop-down lists can be defined in HTML by using the <select> tag, containing the different <option>s. Each <option> must have a name, which can be either contained between <option> and </option>, or alternatively using the label attribute.

Example:

<select name="size">
  <option value="s">small</option>
  <option value="m" label="medium"></option>
</select>

<select> elements that are required and are not multiple need a placeholder option that has no value, for example:

<select required>
  <option value="">choose size</option>
  <option value="s">small</option>
  <option value="l">large</option>
</select>

A <select> element can only have multiple <option selected> if it includes the multiple attribute.

A <select> element represents a control that provides a menu of options. By default, only one option can be selected at a time unless the multiple attribute is present, allowing users to select more than one option. If multiple <option> elements use the selected attribute without multiple, this violates the HTML standard and triggers a validation error.

Example of incorrect usage:

<select name="color">
  <option value="red" selected>Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>

Correct usage with only one selected option:

<select name="color">
  <option value="red" selected>Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Correct usage for multiple selected options with multiple attribute:

<select name="color" multiple>
  <option value="red" selected>Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>

Remove duplicate selected attributes unless multiple is set, or add the multiple attribute if multiple selection is intended.

When nesting a select element inside a label that has a for attribute, the id attribute of the select is required to match it.

The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself.

When the select is inside the label, there’s no need to specify a for attribute as there can only be one select, as in this example:

<label>
  Age
  <select>
    <option>young</option>
    <option>old</option>
  </select>
</label>

However, if the for attribute is specified, then it must match the id of the select like this:

<label for="age">
  Age
  <select id="age">
    <option>young</option>
    <option>old</option>
  </select>
</label>

The aria-required attribute is used to indicate to screen reader users that a form input is required. As there is now in HTML a general required attribute which works with most user agents, it’s unnecessary to use both at the same time. In general, you can rely solely on the required attribute, unless you want to provide backwards compatibility on old screen reader software versions.

Example:

<form action="order.">
<!-- This will raise a warning on unnecesary attributes -->

  <input id="city" name="city" aria-required="true" required />

<!-- You can use this instead -->

  <input id="city" name="city" required />
</form>

The boolean required attribute can only be used with certain types of inputs. Check the input type is one of the allowed.

The required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.

The multiple attribute is used to indicate that multiple options can be selected in a <select> element. As a boolean attribute, it should only be declared without any value.

Instead of:

<select multiple="true">

You should use:

<select multiple>

Here is an example of the correct usage of the multiple attribute:

<label for="colors">Select your favorite colors:</label>
<select id="colors" name="colors" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="yellow">Yellow</option>
</select>

The selected attribute on option elements is boolean, so it should not have any value associated.

To fix this issue, simply remove the value assigned to the selected attribute.

Instead of this:

<select>
  <option selected="true">Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Use this:

<select>
  <option selected>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

In the example above, we’ve removed the value assigned to the selected attribute on the first option element. This will specify that “Option 1” is the default option to be selected in the dropdown list.

Direct text nodes inside select are not permitted content. Browsers typically ignore or mangle that text, leading to inconsistent rendering and confusing experiences for screen reader users. It also breaks conformance, which can impact maintainability and automated tooling. The right approach is to keep instructional text in a corresponding label, or provide a non-selectable prompt using a disabled, selected option. Group labels must be provided with optgroup elements, not free text.

To fix it, remove any raw text inside the select. If you need a prompt, add a first option with value="" and disabled selected hidden for a placeholder-like experience, or rely on a visible label. Ensure all selectable items are wrapped in option, and any grouping uses optgroup with its label attribute. Always associate the select with a label via for/id for accessibility.

Examples

Triggers the error (text node inside select)

<select>
  Please select an option:
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Correct: move instructions to a label

<label for="flavor">Please select a flavor:</label>
<select id="flavor" name="flavor">
  <option value="vanilla">Vanilla</option>
  <option value="chocolate">Chocolate</option>
</select>

Correct: provide a non-selectable prompt inside select

<label for="country">Country</label>
<select id="country" name="country" required>
  <option value="" disabled selected hidden>Select a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

Correct: use optgroup for grouping, not free text

<label for="city">City</label>
<select id="city" name="city">
  <optgroup label="USA">
    <option value="nyc">New York</option>
    <option value="la">Los Angeles</option>
  </optgroup>
  <optgroup label="Canada">
    <option value="toronto">Toronto</option>
    <option value="vancouver">Vancouver</option>
  </optgroup>
</select>

Correct: full document (for context)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Select without stray text</title>
  </head>
  <body>
    <form>
      <label for="size">Choose a size:</label>
      <select id="size" name="size">
        <option value="" disabled selected hidden>Select a size</option>
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
      </select>
    </form>
  </body>
</html>

Tips:

• Put instructions in a label or surrounding text, not inside select.
• Every choice must be an option; use optgroup with label to name groups.
• For placeholders, prefer a disabled, selected first option; avoid raw text nodes.

The <option> element no longer accepts a name attribute, which is now obsolete.

Example:

<select id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
</select>