HTML Guide
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>Learn more:
Related W3C validator issues
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>The disabled attribute is a boolean attribute and must not have a value or should simply be present (disabled or disabled=""). Boolean attributes like disabled indicate presence by their occurrence alone and should not include explicit values.
Incorrect usage:
<input type="text" disabled="yes">
<input type="text" disabled="true">
<input type="text" disabled="false">Correct usage:
<input type="text" disabled>
<input type="text" disabled="">Only the presence of the disabled attribute disables the input. The value, if given, is ignored by the browser but causes validation problems if specified incorrectly. For W3C compliance, simply include the disabled attribute without specifying a value.
Although using <input type="text" disabled="disabled"> might still be marked as valid by the W3C Validator, the general recommendation for boolean attributes is to not pass any value.
An a element with both an href attribute and aria-disabled="true" is invalid; either remove aria-disabled or the href attribute.
The aria-disabled attribute is used for interactive elements to indicate that the element is perceivable as disabled by assistive technologies. However, using aria-disabled="true" in combination with an href attribute on an a element is not valid, because the link remains actionable for both user agents and assistive devices. Instead, if a link should appear disabled, you should remove the href attribute, use CSS for styling, and optionally use aria-disabled="true". If you need the element to always act as a link, avoid aria-disabled and control user access through application logic.
Incorrect:
<a href="page.html" aria-disabled="true">Visit Page</a>Correct—Option 1: Remove aria-disabled, keep link active
<a href="page.html">Visit Page</a>Correct—Option 2: Remove href, use aria-disabled, for non-actionable item
<a aria-disabled="true" tabindex="-1" style="pointer-events: none; color: gray;">Visit Page</a>In the second correct example, setting tabindex="-1" prevents keyboard navigation, and pointer-events: none; makes the link unclickable, while aria-disabled="true" makes the disabled state accessible.
The autocomplete attribute is used to control if the browser can provide assistance in filling out form field values, and it only makes sense for visible, not hidden, inputs.
It is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements.
To fix this issue, you can remove the autocomplete attribute from the input element with type=hidden. Here is an example:
<!-- Wrong code -->
<input type="hidden" name="phone" value="12345" autcomplete="off">
<!-- Correct code -->
<input type="hidden" name="phone" value="12345">The aria-* attributes are part of the WAI-ARIA (Web Accessibility Initiative-Accessible Rich Internet Applications) suite. They are used to improve the accessibility of web pages. However, when we use an input element with a type attribute whose value is hidden, we imply that the element is invisible and has no interaction with the user. Therefore, it doesn’t make sense to add aria-* attributes to it.
To fix this issue, you need to remove the aria-* attributes from the input element with type=hidden. Here is an example:
<!-- Wrong code -->
<input type="hidden" name="referer" value="https://example.com" aria-invalid="false">
<!-- Correct code -->
<input type="hidden" name="referer" value="https://example.com">When nesting an input element inside a label that has a for attribute, the id attribute of the input 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 input is inside the label, there’s no need to specify a for attribute as there can only be one input, as in this example:
<label>
Age
<input type="text" name="age">
</label>However, if the for attribute is specified, then it must match the id of the input like this:
<label for="user_age">
Age
<input type="text" name="age" id="user_age">
</label>The maxlength attribute can be used on an input element to define a client-side validation for the maximum length allowed on an input without resorting to JavaScript.
This attribute is only allowed on elements of type email, password, search, tel, text, or url.
The minlength attribute can be used on an input element to define a client-side validation for the maximum length allowed on an input without resorting to JavaScript.
This attribute is only allowed on elements of type email, password, search, tel, text, or url.
The minlength attribute defines the minimum number of characters (as UTF-16 code units) the user can enter into an <input> or <textarea>. This must be an integer value 0 or higher. If no minlength is specified, or an invalid value is specified, the input has no minimum length. This value must be less than or equal to the value of maxlength, otherwise the value will never be valid, as it is impossible to meet both criteria.
Here’s an example:
<label for="name">Enter your name (max 25 characters)</label>
<input type="text" minlength="25" id="name">The pattern attribute is only allowed on input whose type is email, password, search, tel, text or url. Check the type used, and consider changing to one of the allowed types to enable pattern client-side validation.
The pattern attribute is a handy way of adding client-side validation on HTML forms without resorting to JavaScript. Check out this article to learn more about Input Pattern.
The step attribute is a number that specifies the granularity that the value must adhere to.
It sets the stepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types.
When used, it must be greater than zero.
Example:
<form>
<!-- Valid values include 1.3, 3.3, 5.3, 7.3, 9.3, 11.3, and so on -->
<input id="myNumber" name="myNumber" type="number" step="2" min="1.3" />
</form>