Stay one step ahead of the competition. Evaluate and give feedback on some of the hottest web development tools on the market today. Make your opinion heard! Click Here
Web Forms - Defining Style
(Page 4 of 9 )
The simplest style we could add would be to easily remove the default indenting of <dd> elements within our form:
form dd { margin: 0; }
The preceding snippet of CSS would render our Method D example as viewed in Figure 5-7.
Figure 5-7. Definition list form example with <dd> margins removed
The table-like format of Method A could also be achieved by floating <dt> elements within our form:
form dd { margin: 0; }
form dt { float: left; padding-right: 10px; }
By floating the <dt> elements to the left, the form controls contained in <dd> tags will align themselves to the right, as seen in Figure 5-8. You’ll notice that the form controls don’t line up with each other perfectly—but at the very least this illustrates that while it’s possible to use a <dl> tag to lay out a form, the layout doesn’t have to put each element on its own line.
In fact, because of the presence of the<dl>, <dt>, and <dd> elements—which are in addition to the form <label>
Figure 5-8. Form layout with floated elements
Summary
We’ve looked at four different ways to mark up the same simple form, noting the pros and cons of each. It’s important to point out that the accessibility features that we added to Methods C and D could, of course, be easily added to the first two methods as well—and those methods would be better because of those added features.
Neither one of the methods that we’ve looked at here are necessarily miles ahead of the others in terms of a “best solution.” But it’s valuable to know your options—and what you can combine from all four to create better forms in your own projects.
Let’s recap the differences between the methods presented.
Method A:
Visually, it’s a nice, neat way to organize form controls and labels—especially for larger complex forms.
However, using a table for such a simple form seems a bit unnecessary.
Method B:
Simple markup will degrade nicely in text browsers and small-screened devices.
Visually, just using <br /> tags results in a cramped layout.
Method C:
Simple markup will degrade nicely in text browsers and small-screened devices.
Allows for labels and controls of different lengths without any “lining up” issues.
Contains an important accessibility feature (that could also be applied to the previous methods).
/ 41 
