I love forms. I won’t deny it, they are pretty spectacular. Whether their purpose is to gather account information, make a reservation, or subscribe to a newsletter, every form is special in it’s own way. They are one of the most basic interactions a user will have with a website but it doesn’t mean they have to look that way.
With the advent of Web 2.0 and a focus on the User Experience we have moved past the days of simple black & white html forms to well crafted and visually appealing user interfaces. The first ingredient to a tasty form is valid and semantic markup. It’s the basic elements in a valid form that gives designers the control they want over how it looks. Let’s take a look at our example in it’s most basic structure.
Fig. 01 - Basic Form Structure (view page source).
Pretty ugly. In fact, downright hideous. Their is no consistency or visual appeal to the layout, no indication of focus or required fields, quite unfriendly to the average user. Unfortunately at this point a large portion of designers will immediately turn to tables to format their layout, every time this happens the internet dies a little inside.
It doesn’t have to be this way. We can achieve beautiful and accessible forms without tables, javascript, or an obscene amount of spaces by utilizing it’s important tags; <form> <fieldset> <label> <input> and a little bit of CSS magic. Another important tag that I didn’t use in our example form is <legend> , very useful for organizing large forms by adding captions to fieldsets.
Fig. 02 - Basic Form Style (view page source).
A huge sigh of relief. Adding some basic styling with CSS gives this form some much needed spacing and alignment. I started with giving the <form> a set width, padding, and a border. I wrapped each pair of <label> and <input> elements in a <div> to add some padding, a border, and for some fancy styling later on. What makes the <label> and <input> elements sit next to each other so nicely and not staggered is giving the <label> element a specified width and floating it to the left. The inline elements will fall into place and your left with a clean and clear form.
Fig. 03 - Fancy Form Style (view page source).
Taking your form to the next step in elegance and accessibility is only a few pieces of code away. I gave a background to each div wrapping the <label> and <input> elements. I also added a focus pseudo class for the inputs (input:focus, currently supported by Mozilla).
The simplicity of achieving effective and accessible forms with CSS gives no excuse for the use of tables. There are plenty of great techniques to achieving any layout or effect with your forms, all it takes is a little forethought and ingenuity.
*Known Issues
If your label is longer then a few words it must extend the wrapping div, this pushes the next div below to the right. To fix this you can play around with floating the wrapper div as well as the label.
By Pakcikkantin on May 15th, 2008 at 10:04 am
Thanks man, i really need this . Last time i used tables and td, th
But now i will use this.
By Chris on May 15th, 2008 at 10:14 am
Great to hear. Now we have to get the rest of the internet away from Tables.
By Francisco Camberos on May 15th, 2008 at 12:49 pm
Great post. I love forms too!
Nice site, by the way..
By admin on May 15th, 2008 at 1:00 pm
Francisco Camberos: Glad to see there are more form fanatics out there like me. I appreciate the kind words.
Cheers.
By michael on May 16th, 2008 at 4:45 am
its a form man, i put them in tables because it takes a quarter of the time it does using css. no real reason not to use tables, not like you want good seo on your tables
By Chris Morris on May 16th, 2008 at 8:26 am
Tables weren’t meant to be used for layout and structuring. Tables were meant for displaying raw data. And why not optimize your forms for SEO? Any bit helps.
By David on May 16th, 2008 at 10:01 am
“Tables weren’t meant to be used for layout and structuring. Tables were meant for displaying raw data.”
That is my view exactly. However, I think that a simple form IS part of the page “data”.
But at any case you should add a to the code for more control and fine-tunning that a simple “fieldset/label” combo won’t allow. I just built the whole admin area of my php system (codexplorer.com) this way.
By David on May 16th, 2008 at 10:02 am
Also, you should fix your comment area so that people can post code without it being delete ;D
By Chris Morris on May 16th, 2008 at 10:28 am
To each their own when it comes to forms. Building their layout with CSS does take a bit more time, but if you generalize all your classes you can reuse it as much as you want.
David: Thanks for the heads up on code in the comments. I should also implement a specific reply function as well.
By David on May 16th, 2008 at 11:07 am
Well, I just re-read my comment and it sounds like I am advocating tables - eew!
A <dl> item was erased but that is what I posted in the comment. Add a dl dt and dd around each element to allow multiple items per line and more CSS control.
By Chris on May 16th, 2008 at 11:15 am
Isn’t that technique the same as adding styles to the label and input?
I think their is a similar technique talked about at AListAPart using ul and li.
I’ll have to give them both a try. Cheers.