Home

CSS Examples Tableless forms using CSS

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

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)

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 04:15 AM

Hi,

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

Thank you again! :)

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

Agree with Sadeepa Gunawardana..

.

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

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

#4: AdSense VS Chitika on 05/14 at 07:56 PM

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 03:43 PM

adsdsd

#6: selvi on 07/12 at 10:56 PM

dfsdsdfsd

#7: selvi on 07/12 at 10:56 PM

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

#8: Maqsood on 07/26 at 04:25 AM


NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

All images and content copyright © 2004-2012 CSS Drive. Contact Info | Back to Top