Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

CSS Library: Form CSS: Here

CSS Tableless Form

Author: Dynamic Drive

This is a tableless CSS form which you can use as a template for implementing your own lightweight form. It uses a combination of float and negative margins to create a two column layout for the form. One issue with the form is IE6's three pixel jog bug, which is addressed in the demo manually, by offsetting the jogged checkboxes with an additional margin. You may wish to implement a more thorough fix, though it will increase the size of the code. IE7 does not suffer from the 3 pixel bug.

The form is responsive in that it expands to take advantage of the full horizontal space of the page when the window is 480px or less, or that of most smart phones.

Demo:

Male: Female:

Tennis
Reading
Basketball

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 06/20/2006

Revision History: 06/10/2013 Form now responsive, adapting to windows 480px or less.

Usage Terms: Click here

Your Comments (189)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 19 pages  1 2 3 >  Last »

A nice and compact way of doing this. Although doing this with tables is easier, this may save bandwidth in the longrun.

*I recommend this.
Posted by Nathan on 06/21, 10:09 AM
Great coding, nice, compact. A good way to do this, and i don't think doing this with tables would take more bandwidth.

Greets!
Posted by Fabian Wojtowicz on 06/21, 07:27 PM
Very clean and simple presentation for forms. Well done!
Posted by Matthew C. Gallagher on 06/22, 04:01 PM
Nice work! Still, there are a couple of problems:
1. semantically there are no paragraphs (so P should not be used). A simple break would do to get a clear:left and a div could be used to wrap label and field.
2. The labels for checkboxes and radio buttons do not work. By work I mean: if you click them nothing happens. Clicking a label should toggle the field. Click on agree to terms to see what I mean.

I created a page myself where I collected form styling methods and will mention your technique.

See http://michiel.wordpress.com/2006/02/09/floating-forms/
Posted by Michiel van der Blonk on 06/26, 09:35 AM
how do i get this form to send the feedback in a email to me?
Posted by aaron on 06/27, 04:07 AM
how do i get the feedback to a email from the submit button?
Posted by aaron on 06/27, 04:08 AM
this is nice...thanks for code!!!
Posted by Lily on 06/27, 05:02 AM
The labels most certainly do work, at least in FX 1.5.0.4.
I think the paragraphs are required for validity, though I could be mistaken.
Posted by Twey on 06/28, 01:17 PM
The tags are not needed in this situation ... but they are extremely useful when using CSS since you can easily define styling to any text within the paragraph tag.
... and in regards to this taking less bandwidth, CSS coding will ALWAYS produce less code than using the traditional table methods, especially if used correctly. It may only be a few kilobytes here and there, but when a site starts getting 1000+ hits a day, it can start to add up. Plus CSS is easier to work with due to the separation of code (if using external CSS files, which is the only correct way to do it).

Visit CSS Zen Garden for proof.
Posted by Dustin Halstead on 07/04, 01:51 PM
ROFL, there are days when you are so happy to have woken up ... and to have become hilarious in seconds about stupid bugs like this one (the 3px hack). Thank god there are sharp people out there to push the level up :)
Posted by XaS on 07/07, 08:02 AM

Comment Pages 1 of 19 pages  1 2 3 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.