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)

thanks very much for the tutorial. it really help me understand css and i hv come to love it now.

#1: Afrodream 'n' beaded snadals on 04/28 at 10:15 AM


Thank you for you guide. I've been looking for something like this.

Thank you again! :)

#2: Eric on 04/28 at 11:42 AM

Agree with Sadeepa Gunawardana..


#3: hayek on 05/05 at 08:21 PM

Very nice! It's lean, clean, and accessible! Thanks!

#4: AdSense VS Chitika on 05/15 at 01:56 AM

what's with the pixel positioning!? this will break horribly when you change font-sizes. use em as unit instead!

#5: mjl on 06/24 at 09:43 PM


#6: selvi on 07/13 at 04:56 AM


#7: selvi on 07/13 at 04:56 AM

its a very simple and great form. I lie it.

#8: Maqsood on 07/26 at 10:25 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