HTML Guide
An empty value for the name
attribute on the form
element is invalid and should be removed or replaced with a valid non-empty string.
The name
attribute on a form
element provides a way to reference forms via scripts and images, and it must not be empty. According to the HTML standard, if the name
attribute is present, it must have a non-empty value. An empty string is considered invalid and will trigger HTML validator errors.
Invalid example:
<form name="">
<!-- form elements here -->
</form>
How to fix:
-
Remove the empty
name
attribute if you don’t need it. - Replace the empty value with a meaningful, unique name if you require it for scripting or identification.
Valid examples:
<form>
<!-- form elements here -->
</form>
<form name="registrationForm">
<!-- form elements here -->
</form>
Avoid using empty attribute values, as they do not provide any benefit and result in validation errors.
Learn more:
Related W3C validator issues
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>
There is no attribute validate on the <form> element. Perhaps you meant novalidate?
If the novalidate attribute is present on a <form>, indicates that the form is not to be validated during submission.
For example, while this form has a required attribute on its input, it won’t be enforced because form validation has been disabled using novalidate:
<form novalidate>
<label>City: <input required name="city"></label>
<input type="submit" />
</form>
The action attribute on a <form> element is not a required attribute, but if specified, must be a valid, non-empty URL. For example:
<form action="register.php">
</form>
The issue here is related to the encoding of URLs. In HTML and URLs, special characters that have specific meanings need to be encoded to ensure that the URL is interpreted correctly. This process converts characters to their percent-encoded form, where a character is replaced by % followed by two hexadecimal digits representing the ASCII code of the character.
Explanation:
- The action attribute of a <form> element specifies where to send the form-data when a form is submitted.
- If the URL contains special characters (e.g., spaces, <, >, #, %, etc.), they need to be percent-encoded. For instance, a space character is encoded as %20.
- In this case, the validator is complaining about a % sign that is not correctly followed by two hexadecimal digits, which typically happens if the URL was not properly encoded.
How to Fix:
- Check the URL: Look for any raw special characters that need encoding.
- Correctly Encode the URL: Use online tools or libraries that provide URL encoding support to ensure that the URL is correctly percent-encoded.
Example:
Suppose you have the following incorrect form tag:
<form action="submit%data.html">
<!-- form elements here -->
</form>
The % in submit%data.html should be followed by two hexadecimal digits. If %data was intended to be a part of the URL, it should be encoded properly. Here is how to correct it:
<form action="submit%25data.html">
<!-- form elements here -->
</form>
If % should represent data, replace % with %25, which is the percent-encoded form of %. Always verify each special character is correctly encoded. Using this approach ensures that the URL in the action attribute is valid according to HTML standards.
The name attribute is required for all input elements.
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 novalidate attribute is boolean: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. As a boolean attribute, it does not need to be passed any value such as true or 1 to activate the novalidate property.
This boolean attribute indicates that the form shouldn’t be validated when submitted. If this attribute is not set (and therefore the form is validated), it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form.
Example:
<form method="post" novalidate>
<label>User Name:
<input name="user-name" autocomplete="name">
</label>
<button>Save</button>
</form>
There’s an incomplete or incorrectly formed <meta> tag. The <meta> tag in HTML is used to provide metadata about the HTML document. This metadata is typically specified using attributes like charset, content, http-equiv, itemprop, name, and property.
To fix this issue, you need to ensure that your <meta> tags include at least one of these attributes. Here are some examples of properly formed <meta> tags with each of these attributes:
-
Using the charset attribute:
<meta charset="UTF-8">
This specifies the character encoding for the HTML document, which is crucial for displaying text correctly in different languages.
-
Using the content and name attributes:
<meta name="description" content="A brief description of the webpage content.">
This provides a description of the webpage content, which can be used by search engines.
-
Using the http-equiv and content attributes:
<meta http-equiv="refresh" content="30">
This specifies information to be passed to the browser, such as refreshing the page every 30 seconds.
-
Using the property and content attributes:
<meta property="og:title" content="Your Webpage Title">
This is used for Open Graph meta tags, which improve the appearance of shared content on social media platforms.
Correct Usage Example
Here’s an example of an HTML document with a properly formed set of <meta> tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the webpage content.">
<meta http-equiv="refresh" content="30">
<meta property="og:title" content="Your Webpage Title">
<title>Document</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
A <form> element has already a form role, so specifying role="form" in it is redundant.
Instead of:
<form role="form">
You can simply write:
<form>
In the days before HTML5, named anchors were used as a way to provide a link to a specific section of a document, for example:
<h2>
<a name="section-5">Section 5</a>
</h2>
Now in HTML5, the name attribute is obsolete for <a> tags, and instead, you can use the id attribute of any element (not just <a>) as a way to navigate directly to it, for example:
<h2 id="section-5">Section 5</h2>