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)

It's concise, it's informative and it's exactly what I wanted to know. Thanks guys.

ps. Not much on the site atm, I'm still learning!

#1: Lonesome Twin on 02/10 at 10:10 AM

There's a large gap (approx 600px) between the Name and Email field above in Firefox but not Win IE

#2: Andy on 02/23 at 04:30 AM

Hi Andy:
I don't see that problem in Firefox (1.0)...

#3: admin on 02/23 at 01:54 PM

I see the space as well, in Firefox (Mac and PC) and Safari, though not in IE Win.

The Problem is caused by the navigation bar which is set to "float:left". All of the "br" elements are instructed "clear:left", so they are clearing the nav bar. I assume that IE is wrong (because that's usually the case) in limiting the "clear:left" of the "br" to its containing element.

It would be nice to figure out a way around this.

#4: Dan on 02/24 at 12:48 AM

I know this is picky, but the "for" attribute in a label refers to an element with an id that is the same as the "for" attribute. The form elements here only have names, not ids. It should be <label for="user">user</label><input type="text" name="user" id="user" />. This is true for both transitional and strict, and actually becomes important when you're using multiple checkboxes or radiobuttons which necessarily have to have the same name (but unique ids) to work together correctly.

#5: Mark Kawakami on 02/28 at 02:55 PM

Um, that weird text in the last comment should read "... or radio buttons, which". I don't know why it did that.

#6: Mark Kawakami on 02/28 at 02:55 PM

This layout won't work for input fields without labels. If you try to have more than one radio button or checkbox corresponding to one label, the input fields float all the way to the left.

#7: Chris Ricks on 03/10 at 05:10 PM

this code doesn't validate.

my errors:

Line 36, column 55: required attribute "rows" not specified
< id="comments" name="comments"textarea><textarea>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script\" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript\" for <script>.

Line 36, column 55: required attribute "cols" not specified
< id="comments" name="comments"textarea><textarea>

any suggestions?

#8: beeouder on 03/24 at 04:39 PM

Excellent the examples given in the site is worknig effectively.
Pls give some coding of complex forms.

#9: Sadeepa Gunawardana on 04/05 at 02:15 AM

Aside from the validation errors mentioned above, using BR isn't very semantic. Just set the input to clear:right;. That'll keep each input on it's own line and still let the label flow to the left.

Also, you can be perfectly valid and avoid having to use IDs for each element by wrapping the label around the input/textarea/select.

#10: Kenneth on 04/15 at 02:33 PM

NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

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