Embedded Files
Labels need to describe the purpose of the form control
Labels need to describe the purpose of the form control
Form fields and other form controls usually have visible labels, such as "E-mail Address:" as the label for a text field (see figure below).
♾form label text
When these labels are marked up correctly, people can interact with them using only the keyboard, using voice input, and using screen readers. Also, the label itself becomes clickable, which enables a person who has difficulty clicking on small radio buttons or checkboxes to click anywhere on the label text.
Associating labels explicitly
Associating labels explicitly
Whenever possible, use the label element to explicitly associate text with form elements. The for attribute of the label must exactly match the id of the form control.
Example #1
Example #1
Click on the label, not on the input field to see the effect.
Source code:
<label for="first_name">Your First Name</label>
<input id="first_name" type="text" name="fname"/>
Example #2
Example #2
Note that you can also include the <input> element inside the <label>...</label> element, and also add a <span lang="en"> for example, to indicate the language used in the label. Sometimes, nesting labels and inputs can also make CSS styling easier and produce better results with screen readers.
Source code (with <input> inside the <label>):
<label for="first_name"><span lang=en">Your First Name</span>
<input id="first_name" type="text" name="fname"/>
</label>
Example #3
Example #3
Click on the label "Subscribe to newsletter" to see what this does.
Source code:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"><br>
<label for="subscribe">Subscribe to newsletter</label>
<input type="checkbox" name="subscribe" id="subscribe">
Labeling buttons
Labeling buttons
The label of a <button> element is set inside the element and can include markup. This allows advanced accessibility hints to be included, such as marking up language change. Example: <button>Mon <span lang="fr">bouton</span></button>,for a button with a label in French.
When using the <input> element to create buttons, the label is set in the value attribute of the element. Example: <input type="submit" value="Please submit">, renders a button.
Source code for the "Submit" and "Cancel" buttons example:
<button type="submit">Submit</button>
<button type="button">Cancel</button>
<input type="submit" value="Submit">
<input type="button" value="Cancel">
These give the same results:
Labeling text areas
Labeling text areas
Enter your address:
Source code:
<label for="address">Enter your address:</label><br> <textarea id="address" name="addresstext"></textarea>
Page updated
Google Sites
Report abuse