HTML Guide for input

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>

The role attribute value combobox is not valid on an input element according to the W3C HTML standard.

The role="combobox" is valid only when applied to an element that acts as a container for the combo box widget, usually a div or similar element, and not directly to a native HTML input. Native input elements of type "text" or "search" already have implicit roles and accessibility semantics. To create an accessible combobox, wrap the input inside a container element with role="combobox" and use appropriate ARIA attributes.

Incorrect Implementation:

<input type="text" role="combobox" aria-autocomplete="list">

Correct Implementation:

<div role="combobox" aria-haspopup="listbox" aria-owns="suggestions" aria-expanded="false">
  <input type="text" aria-autocomplete="list" aria-controls="suggestions">
</div>
<ul id="suggestions" role="listbox">
  <li role="option" id="option1">Option 1</li>
  <li role="option" id="option2">Option 2</li>
</ul>

Explanation of attributes:

• role="combobox": Applied to the container (<div>) to define the accessible widget.
• aria-haspopup="listbox": Indicates the presence of a list of suggestions.
• aria-owns / aria-controls: Connects the input and suggestion list.
• aria-expanded: Denotes whether the suggestion list is visible.
• aria-autocomplete: Defines the autocomplete behavior.

This markup ensures better accessibility and passes W3C validation.

type="datetime" is obsolete; it was removed from HTML and is not valid in modern browsers or validators.

Explanation

The input element’s type attribute accepts specific keywords defined by the HTML Living Standard. The keyword datetime was dropped; use either:

• type="datetime-local" for a local date and time without timezone.
• type="date" or type="time" when collecting them separately.
• type="text" with a pattern or a JS widget when timezone-aware datetime is required.

Relevant attributes that still apply include name, value, min, max, and step (e.g., seconds for datetime-local).

HTML examples

Example reproducing the error

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Invalid input type</title>
</head>
<body>
  <form>
    <label>
      Meeting:
      <input type="datetime" name="meeting">
    </label>
  </form>
</body>
</html>

Valid fix with datetime-local

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Valid input type</title>
</head>
<body>
  <form>
    <label>
      Meeting:
      <input type="datetime-local" name="meeting" step="60">
    </label>
  </form>
</body>
</html>

The type dob is not valid for an input. If you want to build a date picker field, you can use the native HTML input elements with type date, datetime-local, or a generic text input decorated with JavaScript and CSS.

In HTML, the type attribute for the <input> element specifies the type of input control that is to be displayed. The type attribute can have values like text, password, email, date, etc. Using an unsupported or invalid value like dob (which presumably stands for “date of birth”) will cause this validation error.

Here’s an example of how you can correct this issue by using a supported type attribute value for the date of birth input:

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

In this corrected example, we’ve used the type="date" attribute value for the date of birth input. This is a valid type for handling dates in HTML forms. Replace the input type with a supported type according to the specific data you need to capture.

Alternatively you can use a JavaScript library to build a date picker on a generic text input. For example, the popular bootstrap-datepicker library will generate a date picker around a text input.

An empty string is not a valid value for the autocomplete attribute on an input element.

The autocomplete attribute controls whether the browser can autofill input values, and it requires a valid, non-empty value according to the HTML specification. Acceptable values are on, off, or specific autocomplete tokens such as name, email, username, etc. Leaving it empty, like autocomplete="", causes validation errors.

Incorrect example:

<input type="text" name="username" autocomplete="">

Correct examples: Enable browser autocomplete:

<input type="text" name="username" autocomplete="on">

Disable browser autocomplete:

<input type="text" name="username" autocomplete="off">

Use a specific token (recommended for forms that collect particular data):

<input type="email" name="useremail" autocomplete="email">

The max attribute on an <input> element does not accept an empty string.

The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.

Remove the empty maxlength value and provide a non-negative integer or omit the attribute entirely.

Explanation

The maxlength attribute on an input element must be a valid non-negative integer per the HTML specification. An empty string ("") is invalid and triggers the validator error.

• Valid: a decimal integer like 0, 10, 255.
• Invalid: empty string, negative numbers, non-numeric strings, or whitespace.
  If no maximum length is needed, omit maxlength instead of leaving it empty.
  Note that maxlength applies to text-entry controls such as type="text", search, url, tel, email, and password. For other types (e.g., number, date), maxlength is ignored and should not be used.

Examples

Correct: set an explicit maximum

<input type="text" name="username" maxlength="20">

Correct: no maximum, omit the attribute

<input type="text" name="comment">

Incorrect: empty string (validator error)

<input type="text" name="username" maxlength="">

An empty string for the min attribute on an input element is invalid; it must be a valid number.

The min attribute specifies the minimum value an <input> element can accept when using types such as number, range, date, or datetime-local. According to the HTML specification, the value for min must be a valid floating point number (or a valid date/time string for date inputs). Setting min="" (an empty string) is invalid and will trigger validator errors.

HTML examples

Invalid usage:

<input type="number" min="" max="10">

Valid usage (set min to a specific number, or omit it if no minimum is required):

<input type="number" min="0" max="10">

or, if no minimum restriction is needed:

<input type="number" max="10">

Always provide a valid number for min or remove the attribute entirely if a minimum is not needed.

The name attribute is required for all input elements.

The input element does not support a type attribute value of numeric; the correct attribute value is number.

HTML input elements have a type attribute that specifies the kind of data that the input is expected to contain. When creating a form field for numeric input, you should use type="number", which provides an input control with features like increment/decrement controls, depending on the browser. This allows browsers to render the appropriate interface for numeric inputs and also provides built-in client-side validation to ensure that the entered data is a numerical value.

Here’s an example of how to correctly define an input for numeric values:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Number Input Example</title>
</head>
<body>
  <form>
    <label for="quantity">Quantity:</label>
    <input type="number" id="quantity" name="quantity" min="1" max="10">
    <input type="submit" value="Submit">
  </form>
</body>
</html>

In this example, the input element has a type of number, allowing users to input or select a numeric value within the specified range of 1 to 10. Using type="number" instead of any incorrect value, like numeric, ensures that your HTML is compliant with W3C standards.

<input> elements can’t have a search role. Instead, try with <input type="search">.

<input> elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently depending on the user agent.

The search role is a landmark. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. The search role is added to the container element that encompasses the items and objects that, as a whole, combine to create search functionality. When a <form> is a search form, use the search role on the form.

Example of a search form:

<form role="search">
  <label for="search-input">Search this site</label>
  <input type="search" id="search-input" name="search">
  <input value="Submit" type="submit">
</form>

The value street-address cannot be used for attribute autocomplete on an <input> element. As this kind of autofill is oriented for multi-line inputs (as in the expected format for addresses), consider using a <textarea> element instead, like in this example:

<textarea name="address" autocomplete="street-address"></textarea>

The value tel-national cannot be used on the attribute autocomplete of an <input> element of type tel. Either change to type="text", or use autocomplete="tel". Examples:

<!-- Using autocomplete "tel-national" on type "tel" is invalid -->

<input name="phone1" type="tel" autocomplete="tel-national" />

<!--Using autocomplete "tel-national" on type "text" is valid -->

<input name="phone2" type="text" autocomplete="tel-national" />

<!--Using autocomplete "tel" on type "tel" is valid -->

<input name="phone3" type="tel" autocomplete="tel" />

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 value of the maxlength attribute contains invalid characters because it is incorrectly combined with another attribute.

In HTML, the maxlength attribute for an input element should contain only a non-negative integer value, which specifies the maximum number of characters allowed in the input. The aria-required attribute must be a separate attribute in the tag.

Correct usage separates each attribute and assigns the appropriate value using quotation marks for each. For example, maxlength="200" and aria-required="true" must be distinct and not combined.

Incorrect:

<input type="text" name="nome" id="nome" maxlength="200 aria-required="true">

Correct:

<input type="text" name="nome" id="nome" maxlength="200" aria-required="true">

This valid example uses maxlength="200" for character limit and adds aria-required="true" to improve accessibility for assistive technologies.

The accept attribute may be specified to provide browsers with a hint of what file types will be accepted on an <input> element. It expects a comma-separated list of allowed file types. Refer to the list of media types to check the accepted tokens. In this example, the first line is invalid while the second is valid:

<input name='file' type='file' accept='doc, docx, pdf' />

<input name='file' type='file' accept='text/doc, text/docx, application/pdf' />

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.

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>