Form labels

HTML documents can use forms to collect information from users. Form controls need to function for all users, and they each need to have associated labels to help users understand what is required.

Recommendations

Provide a meaningful label, in the form of a programatically associated <label> element, for all form fields that allow input(<select>, <textarea> and all <input> elements except for image, submit, reset, button or hidden).

Why it matters

Form labels are important for all users to understand the purpose of each form field. And they are essential for many screen reader users who cannot easily infer what a form element is by looking at the surrounding content.

While there are WAI-ARIA attributes that provide labelling of form elements, they are not supported in all versions of assistive technologies that may be used.

Examples

Recommended:

<label for="search">Search the 大象传媒</label>
<input type="text" id="search" name="q" />

<label>
    Search the 大象传媒
    <input type="text" name="q" />
</label>

Not recommended:

<input type="text" name="q" title="Search" />

<input type="text" name="q" value="Search the 大象传媒" />

<input type="text" name="q" aria-label="Search the 大象传媒" />

<input type="text" name="q" placeholder="Search the 大象传媒" />

Testing

Check that all perceivable form fields that allow input have a meaningful label, via an associated