Web Forms

Use <fieldset> to group form sections

Using the <fieldset> element is a handy way of grouping form controls into sections. Additionally, adding a descriptive

will, in most browsers, add a stylish border around the form controls that you’re grouping. Did I say stylish? Well, I happen to like the border, and with a little CSS, we can make it even more attractive.

First though, let’s take a look at what the markup looks like when creating field sets. We’ll add one to our example form:

<form action="/path/to/script" id="thisform" method="post">
 <fieldset>
  <legend>Sign In</legend>
  <p><label for="name" accesskey="9" >Name:</label><br />
  <input type="text" id="name" name="name" tabindex="1" /></p>
  <p><label for="email">Email:</label><br />
  <input type="text" id="email" name="email" tabindex="2" /></p>
  <p><input type="checkbox" id="remember" name="remember"
  tabindex="3" />
  <label for="remember">Remember this info?</label></p>
  <p><input type="submit" value="submit" tabindex="4" /></p>
 </fieldset>
</form>

Figure 5-12 shows us how our form appears in a typical browser with the <fieldset> and <legend> tags added, along with the CSS that we’re applying to the elements. You’ll notice the stylish border that surrounds the form controls that fall within the <fieldset> tags, with the <legend> breaking the border at the top left of the box.

Figure 5-12. Our form example with the <fieldset> and <legend> added.

The reason I call it “stylish” is because, for a default rendering, with no CSS added at all, it’s rather impressive. And it can get even more interesting when we choose to add a bit more customization, which we’ll do next.

You may also begin to see how useful <fieldset> could be for grouping different sections of a form together. For instance, if our example form was the first part of a larger form that had other groups contained in it, using <fieldset> to visually box those sections off is a semantically rich way to make our forms more organized and readable.

Adding style to <fieldset> and <legend>

We can customize the appearance of the default <fieldset> border and <legend> text with CSS just as easily as with any other element. First, let’s change the border’s color and width, and then we’ll modify the text itself.

To stylize <fieldset>'s border, making it a bit more subtle, we’ll use the following CSS: