Styling Forms with Definition Lists

23, June, 2008

I have been meaning to write a post for a while about definition lists but have just not got round to it. Instead of covering just definition lists though, I thought I would make it a little more specific and talk about a very good use for them, styling forms.

It was not that long ago that I hadn’t even heard of a definition list, now this is one of the most versatile tools in the tool box that I use daily. Definition lists are good for a variety of uses, including Faq’s, forms, images with descriptions or replacing unordered lists for drop down menus to name but a few.

First a little introduction to the definition list for those that may not be aware. Definition lists are in the same list family as the un-ordered list (<ul>) and ordered list (<ol>) but they differ a little in their structure. Unlike the un-ordered and ordered list, the definition list does not have <li> tags but is a pairing of a <dt> tag and one, or multiple <dd> tags. These tags are wrapped within the <dl> tag.

An Example

An example of the definition list structure is as so:

<code>
<dl>
 <dt>Definition</dt>
   
 <dd>A statement of the exact meaning of a word, esp. in a dictionary.</dd>
 <dd>The degree of distinctness in outline of an object, image, or sound, esp. of an image in a photograph or on a screen.</dd>
</dl>
</code> 

As you can see the <dd> tags describe whats in the <dt> tag.

So why do I think that definition lists are the answer for forms? Well, forms are normally made up of two things, a label and an input field. The label is related to the input field, this makes definition lists perfect if you ask me. This may not exactly be the original purpose for a definition list as the dd element is supposed to be a definition description but it works perfectly for forms as the <dt> and <dd> tags are paired, just like the label and input fields are.

Whats the point of adding extra markup when you can just style the label and input tags?

Well adding the extra X/HTML gives the document structure, especially so when there is no style sheet applied. I also find that less CSS styles are required to get a decent looking form, much better than when you have to style all the other form elements.

Ok Ok all these words are hurting my eyes, example please

A simple contact form is normally only about four fields and in its basic, valid markup, looks something like this:

<code>
<form method="post" action="#">
  <fieldset>
        <label for="firstname">First Name:</label>
        <input type="text" id="firstname" />
 
        <label for="lastname">Last Name:</label>
        <input type="text" id="lastname" />
 
        <label for="email">Email Address:</label>
        <input type="text" id="email" />
 
        <label for="comments">Comments:</label>
        <textarea rows="5" cols="30" id="comments"></textarea>
   
   <input type="submit" value="Submit" />
  </fieldset>
</form>
</code> 

If you take a look at the definition list - basic form example, you will see how how it looks with no styles added.

Now lets mark-up the form with a definition list

<code>
<form method="post" action="#">
     <fieldset>
          <dl>
               <dt><label for="firstname">First Name:</label></dt>
               <dd><input type="text" id="firstname" /></dd>
  
               <dt><label for="lastname">Last Name:</label></dt>
               <dd><input type="text" id="lastname" /></dd>
  
               <dt><label for="email">Email Address:</label></dt>
               <dd><input type="text" id="email" /></dd>
  
               <dt><label for="comments">Comments:</label></dt>
               <dd><textarea rows="5" cols="30" id="comments"></textarea></dd>
          </dl>
          <input type="submit" value="Submit" />
     </fieldset>
</form>
</code> 

Now we have added a little more structure to the form, take a look at the second, definition form example, still with no styles added.

Even without any styles applied to the form, it still looks well structured. All we need to do is add a few styles to the form and we can make it look a little easier on the eye.

If we want to make the form sit a little better all that is required is to add the following code:

<code>
form dt{
    float:left;
    width:150px;
}
</code> 

Simple, we have floated the <dt> left, enabling the label and input to sit side by side and by adding a width we have added some space between the label and input fields. A very basic but structured form. If you wanted to have a little space between the input fields just add a margin to the bottom of the <dd>.

<code>
form dd{
    margin-bottom:6px;
}
</code> 

I’ve also added a width to the form just to make it sit a little better and not sprawl all over the page,definition list - example form with styles.

There it is, a very basic form but with a lot more structure added thanks to the definition list and with minimal CSS to make it look neater, much easier on the eye.