HTML and CSS Reference
In-Depth Information
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
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=”“>
<legend>Personal details</legend>
<label for=”Name”> Name:</label>
<input type=”text” name=”name” id=”Name” />
<label for=”Email”>Email:</label>
<input type=”text” name=”email” id=”Email” />
<label for=”Tel”>Telephone:</label>
<input type=”text” name=”tel” id=”Tel” />
<input type=”submit” value=”Submit” />
Search WWH ::

Custom Search