Organizing the Form Elements

If you have a lot of information to fill out on a form, you can group related elements together to make the form easier to follow. The easier it is for your visitors to understand the form, the more likely they are to fill it out correctly.

Tips

I think fieldset elements look great formatted with an outset border. Use background: color; border: outset color, where color is the same in both instances and is what you want for the background of the fieldset. I formatted the legend elements the same way.
The legend element is not at all well supported by Internet Explorer. If you create one and then give your fieldset a background, the background extends up and around the legend, looking really ugly (Figure 17.12). I recommend recreating the legend effect with an aptly styled p element.

Figure 17.12. Internet Explorer does strange things to the legend element, pulling the background from the fieldset up and around it.

Figure 17.13. Because of Internet Explorer's lack of support of the legend element, I recommend using a regular p tag with a class of legend.
Organizing your form into fieldsets is completely optional.

Figure 17.14. Next I style the legend paragraph with a background and outset border. Then I give it a negative bottom margin and relative positioning to pull it on top of the fieldset.
While the align attribute for legend has been deprecated, it's still supported by Firefox and IE (from 4 on). It's default value is left. There were supposedly top and bottom values as well, but I've never seen a browser support them.

Figure 17.15. Now the legends look good even in the recalcitrant IE 6.

Organizing the Form Elements

Figure 17.10. I have added an `id` attribute to each `fieldset` element to facilitate applying styles to each group of form elements.

Figure 17.11. I gave all the fieldset elements some margin, width, and padding, and then applied a separate background color and outset border to each one.

Figure 17.12. Internet Explorer does strange things to the `legend` element, pulling the background from the `fieldset` up and around it.

Figure 17.13. Because of Internet Explorer's lack of support of the `legend` element, I recommend using a regular `p` tag with a `class` of legend.

Figure 17.14. Next I style the legend paragraph with a background and outset border. Then I give it a negative bottom margin and relative positioning to pull it on top of the fieldset.

Figure 17.15. Now the legends look good even in the recalcitrant IE 6.

Organizing the Form Elements

Figure 17.10. I have added an id attribute to each fieldset element to facilitate applying styles to each group of form elements.

Figure 17.11. I gave all the fieldset elements some margin, width, and padding, and then applied a separate background color and outset border to each one.

Figure 17.12. Internet Explorer does strange things to the legend element, pulling the background from the fieldset up and around it.

Figure 17.13. Because of Internet Explorer's lack of support of the legend element, I recommend using a regular p tag with a class of legend.

Figure 17.14. Next I style the legend paragraph with a background and outset border. Then I give it a negative bottom margin and relative positioning to pull it on top of the fieldset.

Figure 17.15. Now the legends look good even in the recalcitrant IE 6.

Figure 17.10. I have added an `id` attribute to each `fieldset` element to facilitate applying styles to each group of form elements.

Figure 17.12. Internet Explorer does strange things to the `legend` element, pulling the background from the `fieldset` up and around it.

Figure 17.13. Because of Internet Explorer's lack of support of the `legend` element, I recommend using a regular `p` tag with a `class` of legend.