There are many ways to mark up a form, including using a table or the label tag. Take a look at these methods and tips to ensure your forms are structured so they benefit the user and the site owner. Also covered are some CSS techniques to customize the forms. (From the book Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm, from Apress, 2004, ISBN: 1590593812.)
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: