HTML Guide

When nesting a select element inside a label that has a for attribute, the id attribute of the select 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 select is inside the label, there’s no need to specify a for attribute as there can only be one select, as in this example:

<label>
  Age
  <select>
    <option>young</option>
    <option>old</option>
  </select>
</label>

However, if the for attribute is specified, then it must match the id of the select like this:

<label for="age">
  Age
  <select id="age">
    <option>young</option>
    <option>old</option>
  </select>
</label>

The for attribute on a label element can’t be an empty string. This attribute is intended to specify which form element a label is associated with, and it must reference the ID of an existing form element. An empty string is neither a valid ID nor a meaningful association.

Explanation

• Invalid HTML: <label for=""></label>

The for attribute expects the value to be the ID of a form element, such as an input, textarea, select, etc.

How to Fix

1. Identify the Form Element: Find the form element (input, textarea, select, etc.) that the label is supposed to be associated with.
2. Assign an ID to the Form Element: Ensure the form element has a unique ID.
3. Modify the Label’s for Attribute: Set the for attribute of the label to match the ID of the form element.

Example

Before Fix

<form>
    <label for="">Username:</label>
    <input type="text" name="username">
</form>

After Fix

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
</form>

The <label> element represents a caption in a document, and it can be associated with a form input using the for attribute, which must be an ID. Document IDs cannot contain whitespace.

Example:

<form>
  <label for="user_name">Name</label>
  <input type="text" id="user_name" />
</form>

<label> tags are used to label inputs in form, which need to be present and visible in the document, for example:

<label for="age">Age</label>
<input id="age" />

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

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>