CSS Examples 
Tableless forms using CSS
Author: CSS Drive
This CSS example transforms a conventional form so it's tableless. A form that doesn't use tables for its layout is much more lightweight and semantically correct.
The CSS:
<style type="text/css">
label{
float: left;
width: 120px;
font-weight: bold;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
textarea{
width: 250px;
height: 150px;
}
.boxes{
width: 1em;
}
#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
br{
clear: left;
}
</style>
The HTML:
<form>
<label for="user">Name</label>
<input type="text" name="user" value="" /><br />
<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />
<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />
<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</form>
By floating the "label" tag to the left, the text description of each form field appears to the left, resulting in a "two column" look for the form. The width of the "label" is controlled, so it will comfortably contain the longest text description in the form. I throw in a <br> tag with "clear: left" after each form field to prevent the floating <label> tag from potentially spilling over to content beneath it. Margins such as "margin-top" and "margin-bottom" are also used to add some nice margins between form fields.
Comments (108)
It's concise, it's informative and it's exactly what I wanted to know. Thanks guys.
ps. Not much on the site atm, I'm still learning!
There's a large gap (approx 600px) between the Name and Email field above in Firefox but not Win IE
Hi Andy:
I don't see that problem in Firefox (1.0)...
I see the space as well, in Firefox (Mac and PC) and Safari, though not in IE Win.
The Problem is caused by the navigation bar which is set to "float:left". All of the "br" elements are instructed "clear:left", so they are clearing the nav bar. I assume that IE is wrong (because that's usually the case) in limiting the "clear:left" of the "br" to its containing element.
It would be nice to figure out a way around this.
I know this is picky, but the "for" attribute in a label refers to an element with an id that is the same as the "for" attribute. The form elements here only have names, not ids. It should be <label for="user">user</label><input type="text" name="user" id="user" />. This is true for both transitional and strict, and actually becomes important when you're using multiple checkboxes or radiobuttons which necessarily have to have the same name (but unique ids) to work together correctly.
Um, that weird text in the last comment should read "... or radio buttons, which". I don't know why it did that.
This layout won't work for input fields without labels. If you try to have more than one radio button or checkbox corresponding to one label, the input fields float all the way to the left.
this code doesn't validate.
my errors:
Line 36, column 55: required attribute "rows" not specified
< id="comments" name="comments"textarea><textarea>
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.
Typical values for type are type="text/css" for <style> and type="text/javascript" for [removed].
Line 36, column 55: required attribute "cols" not specified
< id="comments" name="comments"textarea><textarea>
any suggestions?
Excellent the examples given in the site is worknig effectively.
Pls give some coding of complex forms.
Aside from the validation errors mentioned above, using BR isn't very semantic. Just set the input to clear:right;. That'll keep each input on it's own line and still let the label flow to the left.
Also, you can be perfectly valid and avoid having to use IDs for each element by wrapping the label around the input/textarea/select.
