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)
This example is not valid xhtml! For connect label with input we use id, not name!
thanks for your sharing ..
@reza milan
input[type=text] for example will limit the css directives to text boxes.
how to send the css email form and what is the code on a button is to be written
what is the code for submission of form to be written on submit button
That is a nice way to omit tables, but for a form with many inputs that you want to span across the page (say, in columns), tables are the easiest way to go. Most people now days code their html using a lot of div tags. I'm still attracted to the neat layout you can accomplish with a simple table.
Well these classes help only when you are making a contact form, but while making a registration forms which has various fields... these classes give tremendous amount of rework.
Anyways thanks for the post !
@Justin - yes, you can achieve a simple and quick layout using tables, however, the thing to bear in mind is that using tables for a layout is not 'semantically' correct. CSS and XHTML is the way forward now, and as more and more support is given to this way of designing, sites with tables will be frowned upon more and more.
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
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
http://mlmleads.alfablog.com
new style in mlm
