Tables 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:
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:
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:
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;
}
August 1, 2008 at 1:54 pm |
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
August 8, 2009 at 6:20 am |
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.