HTML and CSS Reference
Organizing a form.
When using fieldset tags to separate and organize information on a form, consider the
Required versus optional information.
You can group all required information into
one section of the form and place all optional information into another grouping. By
doing this, you immediately call attention to the required information on the form.
It can be helpful to enhance the look and feel of the form with
groupings. Especially in the case of a long form, using separators helps direct the
Organizing a Form Using Form Groupings
An important part of good
Web design is to make
a form easy to use. Your
Web site visitors are more
likely to complete a form
if they readily understand
the information that is
being requested. You can
use the <ieldset> tag to
group like information
An important aspect of creating a Web page form is making the form easy for Web site
visitors to understand. Grouping similar information on a form, for example, makes
the information easier to read and understand — and, as a result, easier to complete.
Grouping is especially helpful in cases where some information is required and some is
optional. In online order forms, for example, all the personal information is required (for
example, name, address, and credit card number). On the other hand, an online order
form may include an item (such as age or gender) that a visitor does not want to list.
Therefore, that is optional information.
In the form developed in this chapter, there really is no required information.
A visitor is not placing an order, but just identifying preferences. The groupings in this
case are not based on required versus optional information but instead organizes like
A fieldset control is used to group similar information on a form. The HTML code
below shows the <ieldset> tag used to add a fieldset control to a Web page form:
<fieldset><legend align=”left”>Left-aligned legend</legend>
The <legend> tag within the fieldset tag is optional. Using the <legend> tag creates
a legend for the fieldset, which is the text that appears in the grouping borders, as shown
in the example in Figure 6-20.
Figure 6-20 Fieldset controls on a form.