CSS table-less forms (no tables)

Creating tables for forms can be a real pain. Better to make a form style sheet and keep it handy to reuse, then use lables for your form field names, here is a great example.

<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;
}

Thanks to http://www.quirksmode.org/css/forms.html for this cool CSS trick.

Free CSS Web Design template: Clay

This is a nice CSS template licensed cc Creative Commons

The template is valid XHTML and CSS 2.1



You can preview the template here

or download the full 34k zip file here

The template has some nice texture and fades.
It uses table-less design. Template is available from UsefulDesign