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> and <input> elements—you’ll have plenty to work with in the way of elements that can be styled with CSS.  

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).