This post is all about the design of forms and if you are to use tables, labels or lists (last combined with labels).
Let me first start with the table. There are many people out there who now reads this post and starts screaming: Tables shall not be used for website layout. This is true, but if you read the specifications for table at www.w3.org, table is introduced like this:
“The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.”
I like to use tables when setting up a form. It’s easy, it makes the form design look good and there isn’t really any hassle with floats, display:blocks and such CSS-stuff. Just for the record: I am pretty fluent with CSS and I prefer using CSS. Back when CSS debuted on the web I set up a three column website using CSS only – no tables. Also: CSS is interpreted differently in all the browsers (big applause for Web Standards!).
Not everyone likes tables, and some clients – for some reason – does not want tables used when it comes to layout. So you have to use CSS and such instead. So I did some research on the matter and found that some are actually using lists (OL/UL and LI-tags) to create a form. To me this becomes all wrong.
W3C says this about using lists (OL/UL):
HTML offers authors several mechanisms for specifying lists of information. All lists must contain one or more list elements. Lists may contain:
- Unordered information.
- Ordered information.
- Definitions.
So I don’t see designing a form using lists (the OL-tag for instance) as a good design choice. How would you for instance create a form that looked like this.
[Firstname] [Lastname]
[E-mail]
[Country code] [Phone]
Would you use nested lists so you got a hierarchy?
What I would do? In the example above I think I would have used tables. Again: It is easier, and sometimes it’s best to choose the easy route.
Links:
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
http://www.sitepoint.com/article/fancy-form-design-css/1/
http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
Recommended books:
Web Form Design – Filling in the Blanks By Luke Wroblewski – published by Rosenfeld
