10.9 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 otherwise are unassociated with the form control 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 HTML form on screen, close your eyes, and find the place to enter your name.
The HTML 4.0 standard introduces three new tags that make navigation of HTML 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 HTML 4.0-compliant.
10.9.1 The
Use the
Function:
Creates a label for a form element
Attributes:
ACCESSKEY ONKEYDOWN
CLASS ONKEYPRESS
DIR ONKEYUP
FOR ONMOUSEDOWN
ID ONMOUSEMOVE
LANG ONMOUSEOUT
ONBLUR ONMOUSEOVER
ONCLICK ONMOUSEUP
ONDBLCLICK STYLE
ONFOCUS TITLE
End tag:
; never omitted
Contains:
label_contents
Used in:
form_content
10.9.1.1 Explicit and implicit associations One or more labels get associated with a form control in one of two ways: implicitly by including the form control as contents of the label tag, or explicitly by naming the id of the target form control in the
For example:
The first label explicitly relates the text "Social Security Number:" with the form's Social Security Number text-input control (SocSecNum) since its for attribute's value is identical to the control's id, "SSN." The second label ("Date of birth") does not require a for attribute, nor does its related control require an id attribute, since they are implicitly joined by placing the tag within the
Be careful not to confuse the name and id attributes. The former creates a name for an element that is used by the server-side form processor; the latter creates a name that can be used by