HTML Guide for select

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>

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>

This W3C HTML Validator issue indicates that you’ve placed text content directly inside a <select> element. According to the HTML specification, a <select> element can only contain <option> or <optgroup> elements, and no direct text nodes.

Here’s how to resolve this issue:

Steps to Fix:

• Remove Text Nodes: Ensure that you remove any text that exists directly inside the <select> tags.
• Use <option> Elements: If you want to display text as an option, use <option> tags for each selectable item.

Example of Incorrect Usage:

Here’s an example that generates the validator issue:

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

Corrected Example:

Here’s how to correct this by moving the text outside of the <select> element:

<label for="options">Please select an option:</label>
<select id="options">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Summary:

• Always wrap any instructional or descriptive text outside of the <select> element.
• Use <option> tags to define the choices within the <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>