Forms Without Tables

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;
}


About these ads

3 Responses to Forms Without Tables

  1. Haluk says:

    Please reply.

    I took your code and worked on it a little for understanding purposes.
    I ended up with this code. There you will see that “phone number” field has a problem.
    How do you pleace two more textbox objects on one line?

    For example, your label may read BirthDate and you may have 3 drop downs, one for month, one for day and one for the year.
    With your current style, I could not do it.

    Here is the code

    #form_body
    {
    font: 8pt Arial;
    }
    #form_body fieldset
    {
    border: 1px Solid #c8c8c8;
    background: #f0f0f0;
    width: 200px;
    }
    #form_body fieldset legend
    {
    font: italic 10pt 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;
    margin-right: 5px;
    }
    #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: 190px;
    }
    #form_body fieldset ul li input.button
    {
    border: 1px Solid #71ff72;
    background: #caffca;
    font: 8pt Arial;
    }

    Shipping Details

    Attention*

    Street Address*

    City*

    Province*

    Phone number*

    Email

    Shipping Details

    Attention*

    Street Address*

    City*

    Province*

    Postal Code*

    Email

    </html

  2. Brainstorm says:

    Hi! Thanks for an awesome method to format an HTML form with no tables and only css. I saw one other which was quite like this but had to use some js fix.

    Anyhow, I’ve found a small almost insignificant error. When testing it in Fx (v. 3.5 and probably other versions aswell). I see that the submit button is not aligned under the other inputs. looking at the HTML I see that you have an empty label for the submit and I assumed that it was supposed to fix that. But Fx ignores that unless there is any text in it. And in HTML a white-space char is not text unless there are other characters around (it’s at least so that successive white-space characters are ignored). The fix: Replace with a non-breaking space:  

    I have not tested this is IE yet but if it looks good I’ll use it. Thanks again.

  3. KC Abramson says:

    This is a nice example and I have seen a bunch of other table-less forms however they are all simple one line forms. What happens when you have 1 field label and a set of 3 text boxes vertically on the right. Is there a way to vertial align the same exact way its done with a td table cell? I would love to get away from tables but when I check forms on huge sites like MSN Google and Yahoo I still see them still using tables to it makes me think that maybe for complex forms thats the only way to do it

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: