HTML and CSS Reference
In-Depth Information
20
enhancing Forms
Filling out forms on the Web can be a trying experience for the user. Unclear labels, sloppy
layouts, and hard-to-follow designs can all add unnecessary roadblocks to getting the user's
full cooperation when it is most needed. In this lesson, you learn how to add clarifying struc-
tural elements like fieldsets to a form as well as how to lay out your form with tables and with
CSS. You also get a peek of CSS form enhancements set forth in the HTML5 specification.
G FieLdseTs and LeGends
aPPLyin
aPPL
aPPLyin
When working with larger forms with lots of labels and form controls, it can be helpful to
group sections by using
<fieldset>
and
<legend>
tags. These tags are placed within a form
and add a border around a designated set of fields (hence, a
). The
<legend>
tag, which
goes within the
<fieldset>
tag, provides a title that identifies the group. Here's an example:
<form method=”post” action=”“>
<fieldset>
<legend>Personal details</legend>
<p>
<label for=”Name”> Name:</label>
<input type=”text” name=”name” id=”Name” />
</p>
<p>
<label for=”Email”>Email:</label>
<input type=”text” name=”email” id=”Email” />
</p>
<p>
<label for=”Tel”>Telephone:</label>
<input type=”text” name=”tel” id=”Tel” />
</p>
</fieldset>
<p>
<input type=”submit” value=”Submit” />
</p>
</form>
