HTML5 24-Hour Trainer

Chapter 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 structural 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.

APPLYING 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 fieldset). 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>

As shown in Figure 20-1, the legend is, by default, displayed within the border surrounding the fieldset. You can, of course, use CSS to modify both the border and the legend text; designers might, for example, ...