Web Development and Design Foundations with XHTML, 5th Edition

(^370) Chapter 9 XHTML Forms
Figure 9.18
A

organizes the
customer
information area
There are two ways to associate a label with a form control. The first method places the

tag as a container around both the text description and the XHTML form ele-
ment. The code follows:
E-mail:

The second method uses the idattribute 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:
E-mail:

Notice that the value of the forattributeon the tag is the same as the value
of the idattribute on the tag. This creates the association between the
and the form control. The tag uses both the nameand idattributes
for different purposes. The nameattribute can be used by client-side and by server-side
scripting. The idattribute creates an identifier that can be used by the and
anchor tags.

The Fieldset and Legend Elements

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 CustPhoneelements grouped in this manner.

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

WWW

Focus on Accessibility

Web Development and Design Foundations with XHTML, 5th Edition

The Fieldset and Legend Elements

Get our desktop app

Company

Features

Documentation

Resources