The <label> tag defines a label for <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 toggled.
It also improves 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 every input (except submit, button, image and
hidden inputs), select, and <textarea> field has an associated label element.
<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 -->
<label for="firstname">First name</label> <input type="text" name="firstname" id="firstname" /> <label for="lastname">Last name</label> <input type="text" name="lastname" id="lastname" /> <label for="address">Address</label> <input type="text" name="address" id="address" /> <input type="hidden" name="time" value="..."> <input type="submit" value="Send" />