Tableless forms

I used to believe that to properly mark up a long and complicated form you need a table. Recently though, I changed my mind after some intriguing code examples on the invaluable css-d list. On this page I present my take on tableless forms.

Example

Look ma, no tables.

HTML

I use the simplest possible HTML. That's the point of this whole page, after all.

Note the br tag. For modern CSS browsers it is unnecessary but I included it as a service for older browsers. They won't show the CSS, so I want to break the form into clear parts, ie: one label and its input field.
Besides, the br serves a CSS goal as well.

<form>

	<label for="name">Name</label>
	<input id="name" name="name"><br>

	<label for="address">Address</label>
	<input id="address" name="address"><br>

	<label for="city">City</label>
	<input id="city" name="city"><br>
</form>

Note that you must use both id and name. See the Forms - id vs. name page for more information.

CSS

The CSS is slightly more complex, but only slightly.

label,input {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}

label {
	text-align: right;
	width: 75px;
	padding-right: 20px;
}

br {
	clear: left;
}

First of all we give both labels and inputs a display: block. This allows us to line them up nicely. They get a width (though I later overrule it for the labels), a margin-bottom for a nice layout.

Finally both tags get a float: left. Declaring the float on both elements allows us to ignore the differences in float model between Explorer and the other browsers. I'm not yet sure why this works, but it works.

label,input {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}

Some extra nice layout stuff for the label tags:

label {
	text-align: right;
	width: 75px;
	padding-right: 20px;
}

Finally, as the keystone, we give the br tag a clear: left, that is: any previously defined float is canceled. We have to insert a clear somewhere, or all labels and inputs would line up next to each other, which is not what we want.

I elected to declare the clear on the br, because the only other option (declaring it on the labels themselves) didn't work properly in Opera.

br {
	clear: left;
}

That's it: tableless forms with a good, solid horizontal alignment.