Web Forms - Defining Style

[ganeshbala]

Defining Style

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


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

Extra credit

For this extra credit session, we'll discuss the tabindex and accesskey attributes and how they can do wonders to make our form more navigable. We'll also explore the <fieldset> tag, which can help in organizing form sections. Lastly, we'll cover CSS as it relates to
spicing up our form's appearance.