Using a single paragraph and a few <br/> tags to separate the items is a passable solution—but could visually render a bit on the cramped side. Figure 5-2 shows how this would typically appear in a browser.
Figure 5-2. Method B as rendered in a browser
You can see that while we got away without using a table, it looks rather cramped and ugly. We also run into the problem of the form controls not lining up perfectly, as seen in Figure 5-2.
We could alleviate some of the crowdedness by adding some margins to the <input> elements using CSS like this:
input { margin: 6px 0; }
The preceding would add a 6-pixel margin to both the top and bottom of each <input> element (the name, e-mail, and submit controls), spacing out the elements as seen in Figure 5-3.
Figure 5-3. Method B with padding added to the input elements
While there’s nothing particularly wrong with Method B, there are a few adjustments we can make to build a better form. And those adjustments are evident in Method C. So let’s take a look.
I like Method C for several reasons. First off, for a simple form like this example, I find it convenient to contain each label and control in its own paragraph. When viewed unstyled, the default spacing of a paragraph should be enough to set the items apart in a readable way. Later, we could control precise spacing with CSS on <P> tags that are contained within our form.
We’ve even gone a step further and have given this form a unique, but boring, id="thisform". So, that precise spacing I was just referring to could go something like this:
#thisform p { margin: 6px 0; }
Essentially, we’re saying that all <P> tags within this particular form should have top and bottom margins of 6 pixels—overriding the default margins that the browser imposes on paragraphs in the absence of any styling.
Another difference that Method C has over the previous two is that while each group (label and field) are wrapped in <P> tags, a <br/> puts each on its own line. Using a <br/> to separate the items gets around the issue of fields not lining up perfectly due to text labels of different lengths.
Figure 5-4 shows how Method C would appear in a visual browser, with the CSS applied to each <P> tag as mentioned earlier.
Figure 5-4. Method C as viewed in a browser, with CSS applied to <P> tags
Aside from the visual aspects of Method C, let’s take a look at the most important advantages it has: in particular, an accessibility improvement.
This chapter is from Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today.
/ 45 
