CSS Form Layouts Using Definition Lists

Using definition lists is one of the many methods of creating forms without the use of table layouts. I started using this method in 2004 when working for a company that specialized in web applications and found that it was the easiest and most logical way to organize a web form.

This tutorial will show how to set up an accessible and usable web form using CSS including an invisible spam filter.

STEP 1: Create the Basic HTML form

This is the basic form without any styling, accessibility, or formatting.

• <form method=”post” action=”http://yourdomain.com/cgi-bin/formmail.pl”>
  • Name: <input name=”realname” type=”text” size=”35″>
  • E-mail: <input name=”email” type=”text” size=”35″>
  • Phone: <input name=”phone” type=”text” size=”35″>
  • Message: <textarea name=”message” cols=”45″ rows=”3″></textarea>
  • <input name=”Send” type=”submit” value=”Send Away!”>
• </form>

STEP 2: Accessibility

This is an important step and should not be ignored (unfortunately, most designers do skip this part).

• <form method=”post” action=”http://yourdomain.com/cgi-bin/formmail.pl”>
  • <label for=”name”>Name:</label> <input name=”realname” type=”text” size=”35″ id=”name”>
  • <label for=”email”>E-mail:</label> <input name=”email” type=”text” size=”35″ id=”email”>
  • <label for=”phone”>Phone:</label> <input name=”phone” type=”text” size=”35″ id=”phone”>
  • <label for=”message”>Message:</label> <textarea name=”message” cols=”45″ rows=”3″ id=”message”></textarea>
  • <input name=”Send” type=”submit” value=”Send Away!”>
• </form>

STEP 3: Usability

Another important step is required to help your users fill out your form with minor difficulty. Let your users know what fields are required. There is nothing worse than filling out a form, pressing the send button, and discovering that there were other fields needing information. This very frustrating to your user.

There are so many methods to show a required field. I am going to do this the easiest way possible by simply bolding the label of the item that is required.

• <form method=”post” action=”http://yourdomain.com/cgi-bin/formmail.pl”>
  • <label for=”name”><strong>Name:</strong></label> <input name=”realname” type=”text” size=”35″ id=”name”>
  • <label for=”email”><strong>E-mail:</strong></label> <input name=”email” type=”text” size=”35″ id=”email”>
  • <label for=”phone”>Phone:</label> <input name=”phone” type=”text” size=”35″ id=”phone”>
  • <label for=”message”>Message:</label> <textarea name=”message” cols=”45″ rows=”3″ id=”message”></textarea>
  • <input name=”Send” type=”submit” value=”Send Away!”>
• </form>

STEP 4: Format the HTML

This is the step that actually formats or structures the HTML so it is laid out properly on the web.

• <form method=”post” action=”http://yourdomain.com/cgi-bin/formmail.pl”>
• <dl>
  • <dt><label for=”name”><strong>Name:</strong></label></dt>
  • <dd><input name=”realname” type=”text” size=”35″ id=”name”></dd>
  • <dt><label for=”email”><strong>E-mail:</strong></label></dt>
  • <dd><input name=”email” type=”text” size=”35″ id=”email”></dd>
  • <dt><label for=”phone”>Phone:</label></dt>
  • <dd><input name=”phone” type=”text” size=”35″ id=”phone”></dd>
  • <dt><label for=”message”>Message:</label></dt>
  • <dd><textarea name=”message” cols=”45″ rows=”3″ id=”message”></textarea></dd>
  • <dt> &nbsp;</dt>
  • <dd><input name=”Send” type=”submit” value=”Send Away!”></dd>
• </dl>
• </form>

STEP 5: Format the Layout

A good method to style a form is to assign an ID to it. This allows maximum control of styling the form.

• <form method=”post” action=”http://yourdomain.com/cgi-bin/formmail.pl” id=”contact”>

Next, create styles using that ID in your CSS.

• #contact dt {
  • float:left;
  • width:3em;
  • text-align:right:
  • padding:0 5px 10px 0;
  • }
• #contact dd {
  • text-align:left;
  • padding:0 0 10px 0;
  • }

STEP 6: Make it Pretty

The final step is to add the classes to your form elements so you have maximum control over how your form will look.

HTML

• <form method=”post” action=”http://yourdomain.com/cgi-bin/formmail.pl” id=”contact”>
  • <dl>
    • <dt><label for=”name”><strong>Name:</strong></label></dt>
    • <dd><input name=”realname” type=”text” size=”35″ id=”name” class=”text”></dd>
    • <dt><label for=”email”><strong>E-mail:</strong></label></dt>
    • <dd><input name=”email” type=”text” size=”35″ id=”email” class=”text”></dd>
    • <dt><label for=”phone”>Phone:</label></dt>
    • <dd><input name=”phone” type=”text” size=”35″ id=”phone” class=”text”></dd>
    • <dt><label for=”message”>Message:</label></dt>
    • <dd><textarea name=”message” cols=”45″ rows=”3″ id=”message” class=”text”></textarea></dd>
    • <dt>&nbsp; </dt>
    • <dd><input name=”Send” type=”submit” value=”Send Away!” class=”btn”></dd>
  • </dl>
• </form>

CSS

• input.text, textarea.text, input.btn {font:1.2em “Palatino Linotype”, “Book Antiqua”, Palatino, serif;}
  • input.text, textarea.text {
  • border:1px solid #bfd5e0;
  • color:#333;
  • background-color:#daecf5;
  • padding:5px;
  • }
• input.btn {
  • border:0;
  • background-color:#6699cc;
  • color:#fff;
  • padding:3px;
  • overflow:visible;/*IE Fix*/
  • font-size:1.5em;
  • }

See Example