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)

Please excuse the newbie question, but what's the simplest and best way to get multiple input boxes on one line? Like, "City", input box, "State", input box, "Zip", input box.

#1: Graeme Williams on 07/22 at 03:37 PM

@defaulk:
What you could do is set
width: auto;
but with that set you will see that all labels will have a different width. You could use percentage or em (whatever that's short for). em is relative, so that's probably one of your best bets, it'll format them all the same length, depending on font-size.
Read up @ w3schools

@Graeme Williams:
Just put two or more <input> beside each other without a line break inbetween them (
)

#2: Jesus on 07/26 at 09:33 AM

I think this was quite helful for me since I was trying to keep certain fileds together in the form. Wow!

#3: Shivani Seunarine on 08/03 at 04:29 PM

Some webdev softwares allow you adjects your page layout with CSS.

#4: iota on 08/05 at 05:27 AM

<input> should also be in a container, not direct childs of <form>

This example is semantically incorrect (BRs are baaaad, using or <fieldset> instead) and invalid.

+ no size values are given for css disabled browsers

CSS is good, but don't forget to check your HTML code

#5: Thibaut on 08/11 at 04:28 AM

8's gret

#6: u2ns on 09/27 at 06:37 PM

I used this technique for a project I'm workinng on at work. Clearing the
tag for some reason threw it all out of wack. Also gave me that large gap between the first two fields in firefox. My solution? Simply removed: br { clear: left } and it worked like a charm.

#7: jive on 10/07 at 01:06 AM

Yup its work perfect!!
Thanx for the info

#8: JOKERz on 12/20 at 07:16 AM

NOT SAFE FOR WORK
It seems IE renders
tags with more space than FireFox does.. I'm working out a method to use plain old divs with css positioning to eliminate the need for
's... email with comments or info

#9: Joey on 12/30 at 07:12 AM

Excellent.. This is what i was searching for..

#10: Sachin on 01/31 at 03:44 AM

NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

Hosting Coupon Code

Hostgator Hosting at $3.96/mon. Use CSS Drive exclusive coupon code "cssdrive25" for an additional 25% off

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