Standards for laying out and designing forms (HTML/CSS) - html

Question

One part of web development (from a front-end perspective) is laying out forms. There is never a standard set, and I've seen people continuing to use <tables> to keep styling consistent. Say you were to lay out this form:
At first glance it seems that a table would make laying out this form easy. Another options is to use <fieldset>'s, with perhaps a list inside them. Float the fieldsets to the left, give them equal widths.
My question is what is the most standard way of laying out forms? There seem to be several techniques, but many of them don't work cross browser.
How would you do it? And why?

Answer 1

I must say, the most common way to do this would be to use tables. Unfortunately, there are problems with table based form layouts (big surprise). One big thing is that tables will bleed over their containers (if overflow is not hidden) and they don't squash their contents like CSS can do. On top of that, rendering tables is more expensive (takes up more CPU cycles). Overall, I think that, compared to pure CSS solutions, table based form layouts are rigid and inflexible, and as a designer, I cringe (and you should, too!) at using tables for layout purposes to begin with.
A method that I am beginning to like (and that is growing more popular) is a pure, CSS2 method for laying out forms. I will not credit myself for coming up with the idea, but it is really straight forward. All you have to do is this:
THE HTML:
<form action="process.php" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<br />
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
</form>
THE CSS:
label, input {
width:200px;
display:block;
float:left;
margin-bottom:10px;
}
label {
width:125px;
text-align:right;
padding-right:10px;
margin-top:2px;
}
br {
clear:left;
}
As you can see, the CSS code is really minimal and the results are really awesome. The pros of this method is that it uses less code (faster to download), it is cleaner without all the messy table tags littering your HTML document (maintainability), and I believe web browsers will render the CSS method faster.
Update 1: I also found a CSS method using unordered lists.
Update 2: #musicinmyhead reminded me about using fieldset and legend tags in CSS form layouts. I coded us a quick and dirty little demo here.
Note: I originally learned of this pure CSS form layout from: http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/

Answer 2

Research shows that labels above fields and fields all in one column are the easiest to fill out. Lukew has a lot of form's data/research/info:
http://www.lukew.com/ff/entry.asp?504
As a bonus, that's usually the easiest way to build the presentation layer as well. Plus, it's usually much more mobile-friendly out-of-the-box.
All that said, tables can be valid. In many ways, a form is a partially filled out spreadsheet (if you want to think in terms of tabular data).
I typically wrap the LABEL/FIELD pair in a div and position the label and field as needed depending on the layout desired.

Answer 3

The practice of using tables as layout made sense prior to CSS, but tables are actually intended to present data and nothing else. The simplest way to layout a form is label above field in a single column, but it is possible to create the same grid-like layout that tables provide using the <div> element and some CSS.
For that, the CSS might look like this:
.layout-grid{
display: table;
}
.layout-row{
display: table-row;
}
.layout-cell{
display: table-cell;
}
and the HTML might look like this:
<form action="foo.php" method="post">
<div class="layout-grid">
<div class="layout-row">
<div class="layout-cell">
<label for="foo">Foo:</label>
</div>
<div class="layout-cell">
<input id="foo" name="foo" />
</div>
</div>
<div class="layout-row">
<div class="layout-cell">
<label for="foo">Foo:</label>
</div>
<div class="layout-cell">
<input id="foo" name="foo" />
</div>
</div>
<div class="layout-row">
<div class="layout-cell">
</div>
<div class="layout-cell">
<button type="submit">Go!</button>
</div>
</div>
</div>
</form>

Answer 4

Personally? A table. At work? CSS. I go with whatever is required. There's the whole debate about the fact that a form is not in and of itself tabular data (like that of a form), which is true, and there is CSS that can create a cell-like structure.
If you're short on time and comfortable with only tables? Tables. Next up is the CSS/cell structure, but most will (probably rightly) say CSS all the way. It's not too difficult, and if you want to mix and match the whole thing, say adding an extra, fourth question at the bottom at the first three, it will make the change just a tad quicker. Not much, but a tad.