Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)

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

Method D:

• Structured markup will degrade nicely in text browsers and small-screened devices.

• Contains an important accessibility feature (that could also be applied to the previous methods).

• Labels and form controls could be placed on the same line or separate lines using CSS.

While you wouldn't be guilty of web design crimes if you were to use Method A or B, taking what we know that is good from Method C and applying it to the previous examples would be a step in the right direction.

There is also room for improvement on Method C as well, and we'll take a look at a few additional features we can add in the "Extra credit" section that follows. We'll also talk about some simple CSS that we can apply to make our form more visually appealing.