Guias HTML para múltiplo

In HTML, boolean attributes work differently than you might expect from programming languages. A boolean attribute’s presence on an element represents the true value, and its absence represents false. You don’t set them to "true" or "false" like you would in JavaScript or other languages. According to the WHATWG HTML specification, a boolean attribute has exactly three valid forms:

1. The attribute name alone (e.g., multiple)
2. The attribute with an empty value (e.g., multiple="")
3. The attribute with a value matching its own name, case-insensitively (e.g., multiple="multiple")

Setting multiple="true" is invalid because "true" is not one of the permitted values. While browsers are forgiving and will typically still treat the attribute as present (effectively enabling it), this produces a W3C validation error and does not conform to the HTML standard. Relying on browser leniency leads to inconsistent behavior, makes your code harder to maintain, and can cause problems with HTML processing tools or strict parsers.

This same rule applies to all boolean attributes in HTML, including disabled, readonly, checked, required, hidden, autoplay, and many others.

It’s also important to note that multiple="false" does not disable the attribute. Because the attribute is still present on the element, the browser treats it as enabled. To disable a boolean attribute, you must remove it from the element entirely.

Examples

❌ Invalid: using "true" as the value

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

This triggers the validation error: Bad value “true” for attribute “multiple” on element “select”.

✅ Fixed: attribute name only (preferred)

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

✅ Fixed: empty string value

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

✅ Fixed: value matching the attribute name

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

❌ Common mistake: using "false" to disable

<!-- This does NOT disable multiple selection — the attribute is still present -->

<select name="colors" multiple="false">
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

✅ Correct way to disable: remove the attribute entirely

<label for="color">Select a color:</label>
<select id="color" name="color">
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

The multiple attribute tells the browser that the user can supply more than one value for a given input. For <input type="file">, it allows selecting multiple files at once. For <input type="email">, it allows entering a comma-separated list of email addresses. These are the only two input types that support the multiple attribute according to the HTML specification.

This validation error can appear for two distinct reasons, and sometimes both at once:

1. An invalid value is assigned to the boolean attribute. Boolean attributes in HTML follow strict rules. Valid syntaxes are: the attribute name alone (multiple), an empty string value (multiple=""), or the attribute’s own name as the value (multiple="multiple"). Any other value — including multiple="true", multiple="1", or multiple="yes" — is invalid.

2. The attribute is used on an unsupported input type. Placing multiple on input types like text, number, password, or url is not valid because those types don’t define behavior for this attribute. Browsers will simply ignore it, but it still constitutes invalid markup.

Why this matters

• Standards compliance: Invalid boolean attribute values violate the WHATWG HTML specification. While most browsers are forgiving and may still interpret multiple="true" as the attribute being present, relying on this behavior is fragile and non-standard.
• Accessibility: Assistive technologies rely on valid, well-structured markup. An invalid attribute value could lead to unpredictable behavior in screen readers or other tools.
• Maintainability: Using multiple on an unsupported input type suggests a misunderstanding of the element’s capabilities, which can confuse other developers and lead to bugs.

How to fix it

• Remove the value entirely: Change multiple="1" or multiple="true" to just multiple.
• Use a valid boolean syntax if a value is required: Some templating systems or XML-based contexts (like XHTML) require explicit attribute values. In those cases, use multiple="" or multiple="multiple".
• Ensure the input type supports multiple: Only type="email" and type="file" accept this attribute. If you need multi-value input for other types, consider alternative approaches like multiple separate inputs, a <select multiple> element, or a JavaScript-based solution.

Examples

Invalid: wrong value on a boolean attribute

<!-- Bad: "1" is not a valid boolean attribute value -->

<input type="file" name="attachments" multiple="1">

<!-- Bad: "true" is not a valid boolean attribute value -->

<input type="email" name="recipients" multiple="true">

Invalid: multiple on an unsupported input type

<!-- Bad: type="text" does not support the multiple attribute -->

<input type="text" name="tags" multiple>

<!-- Bad: type="number" does not support the multiple attribute -->

<input type="number" name="quantities" multiple>

Valid: correct usage of multiple

<!-- Correct: boolean attribute with no value -->

<input type="file" name="attachments" multiple>

<!-- Correct: empty string value (valid boolean syntax) -->

<input type="email" name="recipients" multiple="">

<!-- Correct: attribute name as value (valid for XHTML compatibility) -->

<input type="file" name="documents" multiple="multiple">

Full corrected document

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Upload Form</title>
</head>
<body>
  <form action="/submit" method="post" enctype="multipart/form-data">
    <label for="recipients">Recipients:</label>
    <input type="email" id="recipients" name="recipients" multiple placeholder="a@example.com, b@example.com">

    <label for="files">Attachments:</label>
    <input type="file" id="files" name="files" multiple>

    <button type="submit">Send</button>
  </form>
</body>
</html>

The <select> element provides a menu of options for the user. By default, it operates as a single-selection control — the user can pick exactly one option from the list. The selected attribute on an <option> element indicates which option should be pre-selected when the page loads. When two or more <option> elements have the selected attribute inside a single-choice <select>, this creates an invalid and contradictory state: the browser is told to pre-select multiple items in a control that only supports one selection.

When browsers encounter this contradiction, their behavior is inconsistent. Most will silently pick the last <option> marked as selected and ignore the others, but this is not guaranteed by the specification. Relying on undefined behavior leads to unpredictable results across browsers and can confuse both users and developers about which value will actually be submitted with a form.

From an accessibility standpoint, assistive technologies may announce the selected state of options to users. Multiple selected attributes on a single-choice <select> can cause screen readers to provide misleading or confusing information about which option is currently active.

The HTML specification (WHATWG) explicitly states that if the multiple attribute is absent, no more than one <option> descendant of the <select> may have the selected attribute.

How to fix it

You have two options depending on your intent:

1. If only one option should be pre-selected: Remove the selected attribute from all but one <option>. This keeps the <select> as a standard single-choice dropdown.
2. If multiple options should be pre-selected: Add the multiple attribute to the <select> element. This changes the control from a dropdown to a list box where users can select multiple items (typically by holding Ctrl or Cmd while clicking). Keep in mind that this changes the visual appearance and interaction model of the control, so make sure it fits your design and use case.

Examples

Incorrect: multiple selected options without multiple

This triggers the validation error because two options are marked as selected in a single-choice <select>:

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

Correct: only one selected option

If the intent is a single-choice dropdown, keep selected on only one <option>:

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

Correct: multiple selected options with the multiple attribute

If the intent is to allow multi-selection and pre-select more than one option, add the multiple attribute:

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

Correct: no selected attribute at all

If you don’t need any option pre-selected, you can omit selected entirely. The browser will typically display the first <option> by default:

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