org.sonar.l10n.web.rules.Web.InputWithoutLabelCheck.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of sonar-web-plugin

Analyze HTML (also within PHP/Ruby/etc. templates) and JSP/JSF code.

The newest version!

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


Compliant Solution

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