Labeling and Grouping Form Elements
The common text and other content you may use to label and otherwise explain a form are static. Other than by their visual relationship to the form’s input areas, these labels and instructions are unassociated with the form controls that they serve. Because of this, forms are not easily understood and navigable, particularly by people with impaired vision. Try it. Get a simple personal-information form onscreen, close your eyes, and find the place to enter your name.
The HTML 4.0 standard introduced three tags that make navigation of forms easier for users, particularly those with disabilities. They include a way to group and caption regions of the form and a way to individually label form controls. All are supposed to get special treatment by the browser, such as being rendered by a speech-synthesizer as well as specially displayed, and can be easily accessed from the user keyboard — that is, when browsers become fully HTML 4/XHTML-compliant.
The <label> Tag
Use the <label>
tag to define relationships between a form
control, such as a text-input field, and one or more text labels.
According to the latest standards, the text in a label is to receive
special treatment by the browser. Browsers may choose a special
display style for the label (you can, too, with style sheets). And
when selected by the user, the browser automatically transfers focus
to a label’s associated form control.
Get HTML & XHTML: The Definitive Guide, 5th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
