Forms

  <form action="/path/to/script" id="thisform" method="post">
    <dl>
      <dt><label for="name">Name:</label></dt>
      <dd><input type="text" id"name" name="name" /></dd>
      <dt><label for="email">Email:</label></dt>
      <dd><input type="text" id="email" name="email"  /></dd>
      <dt><label for="remember">Remember this info?</label></dt>
      <dd><input type="checkbox" id="remember" name="remember" /></dd>
      <dt><input type="submit" value="submit" /></dt>
    </dl>
  </form>

The last method we’ll look at in regards to form layout involves the use of a definition list to define label and form control pairs. It’s a somewhat controversial move—skirting the fringe of what a definition list is designed to do. But it’s also a method that’s gaining in widespread use, and one worthy of mentioning in this book.

Further ahead, in Chapter 8, we’ll talk in more detail regarding definition lists—and the fact that they certainly are capable of more uses than most designers are aware of. Using a <dl> to mark up a form is a perfect example.

You’ll notice in the code example that each form label is wrapped in a definition term tag (<dt>) followed by its associated form control wrapped in a definition description tag (<dd>). Doing this creates a pairing of label to form control, which when viewed in a browser without any style applied looks like Figure 5-6.

Figure 5-6.  Default form layout using a definition list

By default, most visual browsers indent the <dd> element on its own line. Fantastic. Without adding any additional <p> or <br /> tags,
we have a readable form layout for those browsing without CSS.

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> 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 <dt> elements

This article is excerpted from Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm (Apress, 2004; ISBN 1590593812). Check it out at your favorite bookstore today. Buy this book now.