Creating tableless forms

nobody@vox.com(Matthew Kruskamp) — Wed, 20 Feb 2008 13:08:00 -0700

Overview
I decided to go back to the basics on this article. It has occurred to me that many people are making the switch to div layouts, and forgetting about their forms. In my case I just didn't know how to do it in a good cross-browser fashion. I thought tables were easier. This article will demonstrate a simple way to create forms that are correct and easy.

Why create tableless forms?
People will argue speed as well as many other reasons. I do it for one reason alone. Syntactical correctness. Ok, I'll elaborate. HTML is designed to be a markup language defining the content within an HTML document. When you put your forms in a table you are telling your web-browser and search engines that you have tabular data. The sad truth is you told a fib to both your browser and your search engines :(. You have input forms designed for the user, not tabular data.

SimpleForm

The answer!
Simple. Fieldsets, legends, lists, and inputs. The fieldset tells the browser that there are a set of fields in here. The legend gives you pretty text at the top explaining the fieldset. The list tells the browser we have the items in a list. The labels caption the input boxes.

Simple form
Here is the HTML for a simple form done without tables.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">

       fieldset {
              width: 250px;
       }
       fieldset ul {
              list-style: none;
              margin: 0px;
              padding: 5px 0px;
       }
       fieldset li {
              padding: 2px 0px;
       }
      fieldset label {
              width: 75px;
              float: left;
              vertical-align: top;
              padding-right: 5px;
              text-align: right;
       }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>

<fieldset>
       <legend>Login Information</legend>
       <ul>
              <li>
                     <label>Username:</label>
                     <input name="username" type="text" tabindex="1" />
              </li>
              <li>
                     <label>Password:</label>
                     <input name="password" type="text" tabindex="1" />
              </li>
              <li>
                     <label>Email:</label>
                     <input name="email" type="text" tabindex="1" />
              </li>
       </ul>
</fieldset>

    </div>
    </form>
</body>
</html>

Read and post comments | Send to a friend

Life, Opportunity, and Development

Creating tableless forms