CSS Examples Tableless forms using CSS

Date: 02/10/2005 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">

float: left;
width: 120px;
font-weight: bold;

input, textarea{
width: 180px;
margin-bottom: 5px;

width: 250px;
height: 150px;

width: 1em;

margin-left: 120px;
margin-top: 5px;
width: 90px;

clear: left;




<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" />


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)

#1: Majickal on 02/08 at 04:39 AM

"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.

#2: fatfingur on 02/14 at 01:07 PM

Has anyone seen a css form with multiple columns? I've gone deep into google and come up with nothing!


#3: jose on 02/27 at 05:30 PM

@joseno reason why you can't have a 3 column form

i would prefer to see the above code structured using divs and spans.


span.label {
.rhcolumn {
.row {clear:both;}
.form {
border1px solid black;
margin0 auto;
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>

#4: Justin Adie on 03/22 at 01:56 PM

This is what i was searching for..



#5: NeboN on 03/26 at 12:11 AM

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?

#6: Rob on 03/29 at 09:26 AM

Thanks for this usefull code :)

#7: shearyadi on 04/10 at 03:14 PM

"<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

#8: Cormac on 04/20 at 03:32 PM

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.

#9: marcel on 05/01 at 07:42 PM

can any body let me know how to define and seperate the input types (text,button,radio) in css

#10: reza milan on 05/24 at 06:32 AM
Commenting is not available in this weblog entry.

Partners & ResourcesOur

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site