Forms Without Tables

January 2, 2008

Tableless Form 001Tables are overused in web development these days. I must admit that years ago (around 1995) I used tables to help position elements in web pages. NEVER USE TABLES to format your forms. Not only are tables tacky but they will require more time to modify layouts and do not make much sense in terms of accessibility.

CSS (Cascading Style Sheets) allows you to define the formatting and layout of your web pages. Using CSS will add greater flexibility to your web sites and reduce the time it would take to adjust layout changes versus HTML.

I am going to start building the table less form in a <div>:

<div id="form_body">
  <form method="post" action="">
    <fieldset>
      <legend>Shipping Details</legend>
      <ul>
        <li>
          <label for="name">Attention<em>*</em></label>
          <input type="text" name="name" id="name" />
        </li>
        <li>
          <label for="street_address">Street Address<em>*</em></label>
          <input type="text" name="street_address" id="street_address" />
        </li>
        <li>
          <label for="city">City<em>*</em></label>
          <input type="text" name="city" id="city" />
        </li>
        <li>
          <label for="province">Province<em>*</em></label>
          <input type="text" name="province" id="province" />
        </li>
        <li>
          <label for="postal_code">Postal Code<em>*</em></label>
          <input type="text" name="postal_code" id="postal_code" />
        </li>
        <li>
          <label for="email">Email</label>
          <input type="text" name="email" id="email" />
        </li>
        <li>
          <label for="submit"> </label>
          <input type="submit" name="submit" id="submit" value="Continue" class="button" />
      </ul>
    </fieldset>
  </form>
</div>

Without any CSS Rules being applied, we now have a form that looks like the following:

Forms Without Tables 002
To prevent your visitors from running away from the horribly formatted form, I am going to start applying CSS.

I will first specify the font to be used:

#form_body
{
  font: 8pt Arial;
}

Next I will specify the <fieldset> border, background color and of course the <legend> style:

#form_body fieldset
{
  border: 1px Solid #c8c8c8;
  background: #f0f0f0;
  width: 300px;
}
  #form_body fieldset legend
  {
    font: Bold 8pt Arial;
  }

Now we can apply some formatting to the <ul> and the child <li> elements:

#form_body fieldset ul
{
  margin: 0;
  padding: 0;
}
  #form_body fieldset ul li
  {
    list-style: none;
    margin-bottom: 3px;
    text-align: left;
  }

Here is the CSS to position the <label> for each of the <input> items, this is where all the magic happens:

#form_body fieldset ul li label
{
  width: 150px;
  float: left;
}
  #form_body fieldset ul li label em
  {
    color: #ff1515;
    font: 10pt Arial;

  }

Before I display the final bit of CSS, let’s take a look at our HTML now:

Forms Without Tables 003

Now all that is needed is to specify the formatting of the <input> elements:

#form_body fieldset ul li input
{
  border: 1px Solid #c8c8c8;
  font: 8pt Arial;
  width: 150px;
}
#form_body fieldset ul li input.button
{
  border: 1px Solid #71ff72;
  background: #caffca;
  font: 8pt Arial;
}

Before I display some other possible enhancements to the form here is the entire HTML to reproduce our new table less form:

<html>
<head>
  <style type="text/css">
    #form_body
    {
      font: 8pt Arial;
    }
      #form_body fieldset
      {
        border: 1px Solid #c8c8c8;
        background: #f0f0f0;
        width: 300px;
      }
        #form_body fieldset legend
        {
          font: Bold 8pt Arial;
        }
        #form_body fieldset ul
        {
          margin: 0;
          padding: 0;
        }
          #form_body fieldset ul li
          {
            list-style: none;
            margin-bottom: 3px;
            text-align: left;
          }
            #form_body fieldset ul li label
            {
              width: 150px;
              float: left;
            }
              #form_body fieldset ul li label em
              {
                color: #ff1515;
                font: 10pt Arial;

              }
            #form_body fieldset ul li input
            {
              border: 1px Solid #c8c8c8;
              font: 8pt Arial;
              width: 150px;
            }
            #form_body fieldset ul li input.button
            {
              border: 1px Solid #71ff72;
              background: #caffca;
              font: 8pt Arial;
            }
  </style>
</head>
<body>
  <div id="form_body">
    <form method="post" action="">
      <fieldset>
        <legend>Shipping Details</legend>
        <ul>
          <li>
            <label for="name">Attention<em>*</em></label>
            <input type="text" name="name" id="name" />
          </li>
          <li>
            <label for="street_address">Street Address<em>*</em></label>
            <input type="text" name="street_address" id="street_address" />
          </li>
          <li>
            <label for="city">City<em>*</em></label>
            <input type="text" name="city" id="city" />
          </li>
          <li>
            <label for="province">Province<em>*</em></label>
            <input type="text" name="province" id="province" />
          </li>
          <li>
            <label for="postal_code">Postal Code<em>*</em></label>
            <input type="text" name="postal_code" id="postal_code" />
          </li>
          <li>
            <label for="email">Email</label>
            <input type="text" name="email" id="email" />
          </li>
          <li>
            <label for="submit"> </label>
            <input type="submit" name="submit" id="submit" value="Continue" class="button" />
        </ul>
      </fieldset>
    </form>
  </div>
</body>
</html>

To add a more modern look, we can change the background properties of the <fieldset>. Below are some examples with gradient backgrounds:

forms-004.pngforms-005.png

Applying a background image to the <fieldset> is very straight forward:

#form_body fieldset
{
  border: 1px Solid #c8c8c8;
  background: url('green_grad.jpg') repeat-x top left;
  width: 300px;
}