HTML Guide
The name attribute is required for all input elements.
Last reviewed: March 16, 2023
Related W3C validator issues
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.
Empty name attributes on <a> are invalid; an anchor’s name/id must be a non-empty unique identifier.
Historically, the name attribute on <a> was used to create fragment targets (e.g., <a name="top"></a>). In HTML5/living standard, fragment navigation should use the id attribute instead. The name attribute on <a> is obsolete for this purpose, and an empty string is never allowed for identifiers.
Use id with a non-empty value to create link targets, and point to them with href="#idValue". If you keep name for legacy reasons, it must still be non-empty and match the HTML syntax for valid IDs. Avoid adding empty attributes like name="" or id="". Also ensure uniqueness of each id in the document.
HTML Examples
Example causing the validator error
<!doctype html>
<html lang="en">
<head>
<title>Anchor name error</title>
</head>
<body>
<a name=""></a>
<a href="#"></a>
</body>
</html>Corrected example using id (recommended)
<!doctype html>
<html lang="en">
<head>
<title>Anchor id fix</title>
</head>
<body>
<a id="top"></a>
<a href="#top">Back to top</a>
</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>The value of the name attribute on an <iframe> should not start with an underscore (_).
Browsing context names that begin with an underscore are reserved keywords in HTML, like _blank, _self, _parent, and _top. Using these reserved names or any custom name starting with an underscore for the name attribute of an <iframe> can lead to unexpected behavior and is considered invalid HTML.
Here’s how to fix the issue:
Problematic Code
<iframe src="https://example.com" name="_example"></iframe>Solution
To resolve this issue, you should use a valid value for the name attribute that does not start with an underscore.
Corrected Code
<iframe src="https://example.com" name="example"></iframe>Steps:
- Identify the iframe element with the invalid name attribute value that starts with an underscore.
- Replace the name value with a valid identifier that does not start with _. Use letters, numbers, hyphens (-), and underscores (_) (but not at the beginning).
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">A <meta> tag has been found that is either malformed, or in a bad place within the document. Check its attributes and context.
For example, the following HTML contains a valid <meta> tag that is raising an issue because of bad context, caused by an <img> tag that shouldn’t be there:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<img src="photo.jpg" alt="A smiling cat" />
<meta name="description" content="Description of this page" />
</head>
<body>
<p>Some content</p>
</body>
</html>If we fix that document and move the <img> tag within the body, the issue raised about <meta> disappears because it’s now in a valid context:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<meta name="description" content="Description of this page" />
</head>
<body>
<p>Some content</p>
<img src="photo.jpg" alt="A smiling cat" />
</body>
</html>