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.

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

To organize the form elements:

1.	Below the form tag but above any form elements that you wish to have contained in the first group, type <fieldset>.
2.	If desired, type <legend.
3.	If desired, type align="direction" where direction is left or right.
4.	Type >.
5.	Type the text for the legend.
6.	Type </legend> to complete the legend.
7.	Create the form elements that should belong in the first group. For more information, see pages 262276.
8.	Type </fieldset> to complete the first group of form elements.
9.	Repeat steps 18 for 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.

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.