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)
Please excuse the newbie question, but what's the simplest and best way to get multiple input boxes on one line? Like, "City", input box, "State", input box, "Zip", input box.
@defaulk:
What you could do is set
width: auto;
but with that set you will see that all labels will have a different width. You could use percentage or em (whatever that's short for). em is relative, so that's probably one of your best bets, it'll format them all the same length, depending on font-size.
Read up @ w3schools
@Graeme Williams:
Just put two or more <input> beside each other without a line break inbetween them (
)
I think this was quite helful for me since I was trying to keep certain fileds together in the form. Wow!
Some webdev softwares allow you adjects your page layout with CSS.
<input> should also be in a container, not direct childs of <form>
This example is semantically incorrect (BRs are baaaad, using or <fieldset> instead) and invalid.
+ no size values are given for css disabled browsers
CSS is good, but don't forget to check your HTML code
8's gret
I used this technique for a project I'm workinng on at work. Clearing the
tag for some reason threw it all out of wack. Also gave me that large gap between the first two fields in firefox. My solution? Simply removed: br { clear: left } and it worked like a charm.
Yup its work perfect!!
Thanx for the info
NOT SAFE FOR WORK
It seems IE renders
tags with more space than FireFox does.. I'm working out a method to use plain old divs with css positioning to eliminate the need for
's... email .(JavaScript must be enabled to view this email address) with comments or info
Excellent.. This is what i was searching for..
