O'Reilly logo

HTML5 24-Hour Trainer by Mark Fletcher, Joseph W. Lowery

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required