HTML and CSS Reference
In-Depth Information
There are two ways to associate a label with a form control. The first method places the
<label>
tag as a container around both the text description and the XHTML form ele-
ment. The code follows:
<label>
E-mail: <input type="text" name="CustEmail" id="CustEmail" />
</label>
The second method uses the
id
attribute to associate the label with a particular
XHTML form element. This is more flexible and is better suited for forms that are for-
matted with a table. The code follows:
<label for="email">
E-mail:
</label>
<input type="text" name="email"
id="email" />
Notice that the value of the
for
attribute
on the
<label>
tag is the same as the value
of the
id
attribute on the
<input>
tag. This creates the association between the
<label>
and the form control. The
<input>
tag uses both the
name
and
id
attributes
for different purposes. The
name
attribute can be used by client-side and by server-side
scripting. The
id
attribute creates an identifier that can be used by the
<label>
and
anchor tags.
Focus on Accessibility
You have seen an example using a table to format a form. Another technique that
can be used to create a more visually pleasing form is to group elements with the
<fieldset>
tag. Browsers that support this feature will place a visual cue, such as an
outline or a border, around form elements grouped in a
<fieldset>
. The
<legend>
tag can be used to provide a label for this grouping Figure 9.18 shows the
CustName
,
CustEmail
, and
CustPhone
elements grouped in this manner.
WWW
Figure 9.18
A
<fieldset>
organizes the
customer
information area
The XHTML to create the grouping shown in Figure 9.18 follows:
<fieldset><legend>
Customer Information
</legend>
<label>Name:
<input type="text" name="CustName" id="CustName" size="30" />
</label> <br /><br />
<label>E-mail:
<input type="text" name="CustEmail" id="CustEmail" />
</label><br /></br />
<label>Phone: <input type="text" name="CustPhone" id="CustPhone"
size="15" maxlength="12" value="###-###-####" /></label>
</fieldset>
The grouping and visual effect of the
<fieldset>
element creates an organized and
appealing Web page containing a form. Using the
<fieldset>
and
<legend>
tags to
Search WWH ::
Custom Search