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)


#1: fdvsdfb on 09/07 at 05:53 AM

agreed, with kenneth. the use or BR negates the very aspect of CSS. when using floats, clear is your best friend. many different methods to use that too, esp when making column layouts.

#2: papercube on 09/07 at 06:12 PM

Good work,it will ease my work.I will use this.thanks a lot..


#3: hayek on 09/15 at 06:34 PM


#4: sree on 09/20 at 10:35 AM

looks very good.

#5: felsefe on 09/29 at 04:40 PM

Nice tutorial...Thank you.

#6: John on 10/14 at 04:25 AM

looks very interesting.
thanks for info.

#7: sam on 10/17 at 09:27 AM


#8: fdgdgdgd on 10/22 at 11:02 AM

Neat trick. Thanks for sharing.
Personalized Dog Tags

#9: Paul B on 11/08 at 09:51 PM

Works Great


#10: Carl Edwards on 11/14 at 03:28 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