HTML and CSS Reference
In-Depth Information
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />
<label>Date of birth: <input type="text" name="DofB" /></label>
The first label explicitly relates the text "Social Security Number:" with
the form's Social Security number text-input control (
SocSecNum
), be-
cause 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, because they are implicitly
joined by placing the
<input>
tag within the
<label>
tag.
Be careful not to confuse the
name
and
id
attributes. The former creates
a name for an element that the browser sends to the server-side forms
processor;
id
creates a name that
<label>
tags and URLs can use. Note
also that although a label may reference only a single form control, sev-
eral labels may reference a single control. Thus, you can steer users to
a particular form input region from several places in a document.
9.10.1.2. Other label attributes
Labels also share many of the general display, access, and event-related
ard HTML 4 and XHTML event attributes, labels also support the
onfocus
and
onblur
attributes.
9.10.2. Forming a Group
Beyond individual labels, you may group a set of form controls and label
the group with the
<fieldset>
and
<legend>
tags. Again, the HTML 4
and XHTML standards attempt to make forms more readily accessible
by users, particularly those with disabilities. Grouping form controls into
explicit sections gives you the opportunity to specially display and oth-
erwise manage the form contents.
