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)
I found that the br { clear: left } was also affecting hidden fields hence additional spaces (< br / >'s) appearing in the html view. (spacing added to avoid a new line)
"That's a horrible solution! It uses fixed sizes in pixels. If you use tables, it will intelligently size the columns." ---> I think this is a stupid comment from John. If you wanna use tables, go on dimwit.
Has anyone seen a css form with multiple columns? I've gone deep into google and come up with nothing!
Peace...
@joseno reason why you can't have a 3 column form
i would prefer to see the above code structured using divs and spans.
e.g.
<style>
span.label {
width:6em;
float:left;
text-align:right;
margin-right:1em;
}
span.field{
text-align:left;
margin-right:1em;
width:15em;
}
span.rhcolumn {
text-align:left;
width:15em;
}
div.row {clear:both;}
.form {
width:40em;
border: 1px solid black;
margin: 0 auto;
}
</style>
<form class="form">
<div class="row">
<span class="label">Label</span>
<span class="field"><input type="text" name="text" /></span>
<span class="rhcolumn">rh column here</span>
</div>
</form>
This is what i was searching for..
:)
Thanx!
Your form solution seems ok but should form elements/inputs be placed within label tags, isn't that the whole point of the label tag?
Thanks for this usefull code :)
"<input> should also be in a container, not direct childs of <form>"
I don't see any reason for this. I would encourage you to drop the
tags though
120px wide labels are NOT a good way to design your forms. Text size is not the same for all browsers and platforms and users can (and should be able to) change the text size.
can any body let me know how to define and seperate the input types (text,button,radio) in css
