Web Forms - Use fieldset to Group Form Sections

[ganeshbala]

Use fieldset to Group Form Sections

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>

  <input type="text" id="name" name="name" tabindex="1" /></p>
  <p><label for="email">Email:</label>

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

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:

#thisform {
  font-family: Georgia, serif;
  font-size: 12px;
  color: #999;
  }

#thisform label {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: #660000;
  }

#thisform fieldset {
  border: 1px solid #ccc;
  padding: 0 20px;
  }

We also specify a 20-pixel margin on both the right and left, with zero margins on both top and bottom. Why zero margins? Because our form labels and controls are wrapped in <p> tags, there's already enough padding at both the top and bottom.