The “select” element cannot have more than one selected “option” descendant unless the “multiple” attribute is specified.

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>

The W3C HTML validator issue arises when a <select> element is marked as required but doesn’t contain any <option> elements. The semantic purpose of a <select> element is to provide a list of options for the user to select from. If it is marked as required, it implies the user must make a selection from available options.

Here is an explanation of the involved elements and attributes:

• <select>: This represents a drop-down list in an HTML form.
  • required: When this attribute is present, it means the user must select an option before submitting the form. It cannot be empty.
  • multiple: This boolean attribute allows multiple selections if present.
  • size: This attribute specifies the number of visible options. If greater than 1 and multiple is not set, it turns the drop-down into a list box.

If the multiple attribute is not present and the size attribute is not greater than 1, you need at least one <option> element for the <select> to be valid when required is used.

To resolve this, ensure that your <select> element contains at least one <option>:

<label for="choices">Choose an option:</label>
<select id="choices" name="choices" required>
  <option value="">--Please choose an option--</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

This example includes a placeholder option with an empty value to prompt the user to select an option and other valid options. The value for the placeholder is empty, which is a common practice for required fields to prevent it from being selected by default.

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 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>

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.