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)

That's a horrible solution! It uses fixed sizes in pixels. If you use tables, it will intelligently size the columns.

#1: John on 04/28 at 07:38 PM

This is for testing only.

#2: Rohini on 05/06 at 10:48 PM

To John:

You can also use percentages or other measurement types to make these flow as well. Tables are certianly not the ideal solution.

#3: Ryan on 05/10 at 09:20 AM

The float didn't seem seem to work right for me at all. I have IE 6.0 on Windows XP. The columns are directly after the label so it doesn't look good at all. And the label is aligning at the bottom, not the top as in the example.

#4: Denise on 06/08 at 10:59 AM

Actually, it wasn't finding my .css file. I prefer to use .css files and reference them instead of adding the style code to the header. When I put the css code directly in the header it works. There's no logical reason for it not to work using a .css file. My reference is below:

<stylesheet" TYPE="text/css" HREF="tableless_form.css">

There are no typos and the file resides in the same dir as the html file. Any ideas why it doesn't work?

#5: Denise on 06/08 at 11:10 AM

the validation error is fixed by adding cols="" rows=""

< name="comments" cols="" rows="" id="comments"textarea><textarea>

#6: beeouder on 06/08 at 12:34 PM

thanks

#7: Raul on 06/09 at 10:08 AM

>> <stylesheet" TYPE="text/css" HREF="tableless_form.css">
>> Any ideas why it doesn't work?

RTFM!

Use:

<stylesheet" type="text/css" href="tableless_form.css" />

#8: o my god on 06/21 at 04:56 PM

ou crap... forum's php code sucks big time...

#9: o my god on 06/21 at 04:57 PM

This is nice, but you have to hard code the label width. Is there any way of making them expandable according to their content and yet still making all inputs align, like you can do with tables?

#10: defaulk on 07/10 at 07:06 PM


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