HTML Guide

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>

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 <ul> element is used to define unordered lists, where each element must be contained within a <li> element, like in this example:

<ul>
  <li>first element</li>
  <li>second element</li>
  <li>third element</li>
</ul>

Ensure that there’s no content inside the <ul> element that is not contained within a <li> element.

Sometimes this error comes when trying to give a title to the list, for example:

<ul>
  Fruits
  <li>Apple</li>
  <li>Orange</li>
</ul>

Instead, that title text should be outside the list, like:

<span>Fruits</span>
<ul>
  <li>Apple</li>
  <li>Orange</li>
</ul>

Other times, this can come as the concatenation of <li> elements which results in something like:

<ul>
   <li>First item</li>
   &nbsp;
   <li>Second item</li>
  &nbsp;
   <li>Third item</li>
</ul>

Note how in this case that &nbsp; used to join the <li> is causing the problem, as it’s content that is not contained by a <li> element, as required by the <ul> element.

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