HTML Guide

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.

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>

All HTML elements may have the hidden boolean attribute set. When specified on an element, it indicates that the element is not yet, or is no longer, relevant, so browsers won’t render it.

Boolean attributes don’t accept values, its presence represents the true value and its absence represents the false value.

<!-- This is invalid because the hidden attribute should not have a value set -->

<div hidden="false"></div>

<!-- The correct way to hide a div is like this -->

<div hidden>This will be hidden</div>

<!-- And to show the element, we just don't hide it -->

<div>This won't be hidden</div>

The allowfullscreen attribute is used to allow an iframe to activate fullscreen mode. As a boolean attribute, it should only be declared without any value.

Here is an example of correct usage:

<iframe src="https://example.com" allowfullscreen></iframe>

However, this is now a legacy attribute, and has been redefined as allow="fullscreen", as part of the more general Permissions Policy:

<iframe src="https://example.com" allow="fullscreen"></iframe>

Use the boolean attribute disabled without any value or with the attribute name as the value; "true" is invalid.

Detailed explanation

The HTML boolean attribute disabled indicates that the element is not editable, focusable, or submittable. For boolean attributes (per the WHATWG HTML standard and MDN), the presence of the attribute means “on/true,” and its absence means “off/false.” Valid syntaxes are:

• disabled
• disabled=""
• disabled="disabled"

Invalid values include arbitrary strings like "true" or "false". Using disabled="true" triggers the validator error because boolean attributes must not use non-empty values other than the attribute name itself.

Relevant elements that support disabled include input, button, select, textarea, optgroup, option, fieldset, and form (partial behavior). For dynamic enabling/disabling, set or remove the attribute via JavaScript rather than assigning string values.

HTML examples

Reproduce the validator error (invalid)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Invalid Disabled Example</title>
</head>
<body>
  <form>
    <input type="text" disabled="true">
    <button type="submit" disabled="false">Submit</button>
  </form>
</body>
</html>

Fix (valid boolean attribute usage)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Valid Disabled Example</title>
</head>
<body>
  <form>
<!-- Presence means disabled -->

    <input type="text" disabled>
<!-- Also valid: disabled="disabled" or disabled="" -->

    <button type="submit" disabled="disabled">Submit</button>
  </form>
</body>
</html>

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.

checked is a boolean attribute and should not have a value; it must be written as just checked.

The checked attribute is used with <input> elements of type checkbox or radio. As a boolean attribute, it is either present (interpreted as true) or omitted (false). Adding any value, like checked="true", is not valid and causes a validation error. The correct usage is simply checked.

Incorrect example:

<input type="checkbox" checked="true">

Correct example:

<input type="checkbox" checked>

Example in context:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Checkbox Example</title>
</head>
<body>
  <label>
    <input type="checkbox" checked>
    Subscribe to newsletter
  </label>
</body>
</html>

Invalid value used for the multiple attribute on an input element.

The multiple attribute is a boolean attribute for certain input types (e.g., email, file). Boolean attributes must appear without a value (or with the same name as value in legacy cases), and they only work on specific types. Valid usage: <input type="email" multiple> or <input type="file" multiple>. Invalid usage includes multiple="1", multiple="true", or using multiple on unsupported types like text or number. The email type allows comma-separated addresses when multiple is present; the file type allows selecting more than one file.

HTML Examples

Example that reproduces the error

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Invalid multiple</title>
</head>
<body>
<!-- Invalid: value on boolean attribute, and wrong type -->

  <input type="text" name="tags" multiple="1">
</body>
</html>

Corrected example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Valid multiple</title>
</head>
<body>
<!-- Valid: boolean attribute without a value on supported types -->

  <input type="email" name="recipients" multiple placeholder="name@example.com, other@example.com">

  <input type="file" name="attachments" multiple>
</body>
</html>

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>