The <label> tag defines a label for the <input>, <select> and <textarea> elements.

The <label> tag does not render as anything special. However, it provides a usability improvement for mouse users: When the text within the <label> element is clicked, the associated input field is toogled. It also improves the usability for visually impaired users: Screen readers will announce the label text whenever the focus is set on the input field.

The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

The purpose of this rule is to make sure that any <input> (except "submit", "button", "image" and "hidden" ones), <select> and <textarea> field has an associated label element.

Noncompliant Code Example

<input type="text" name="firstname" />               <!-- Non-Compliant - no id -->
<input type="text" name="lastname" id="lastname" />  <!-- Non-Compliant - no matching label for "lastname" -->

<label for="address">Address</label>
<input type="text" name="address" id="address" />    <!-- Compliant -->

<input type="hidden" name="time" value="...">        <!-- Compliant - "hidden" type is excluded -->
<input type="submit" value="Send" />                 <!-- Compliant - "submit" type is excluded -->