Text Input Label

Description

To associate each form field with its corresponding label, use the label element.

The label's for attribute and the input's id attribute establish this relationship:

<label for="name">Name:</label>
<input type="text"  name="name" id="name" value="" />

This association creates 508-compliant applications that are accessible to assistive technologies.

Example

To hide labels in an accessible way attach the ui-hidden-accessible style to the element.

For instance, we applied this technique to the search field.

<label for="search" class="ui-hidden-accessible">Search</label>
<input type="search" id="search"  placeholder="Search" />

This will gracefully hide the label while preserving 508 compliance.