HTML Guide

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:

1. Check the URL: Look for any raw special characters that need encoding.
2. 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.

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

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>