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" />
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.
The Fieldset and Legend Elements
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.
Figure 9.18
A <fieldset>
organizes the
information area
The XHTML to create the grouping shown in Figure 9.18 follows:
<fieldset><legend> Customer Information </legend>
<input type="text" name="CustName" id="CustName" size="30" />
</label> <br /><br />
<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>
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