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.
Demo:
The CSS:
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 »
Great coding, nice, compact. A good way to do this, and i don't think doing this with tables would take more bandwidth.
Greets!
Greets!
Very clean and simple presentation for forms. Well done!
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/
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/
how do i get this form to send the feedback in a email to me?
how do i get the feedback to a email from the submit button?
this is nice...thanks for code!!!
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.
I think the paragraphs are required for validity, though I could be mistaken.
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.
... 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.
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 :)
Commenting is not available in this weblog entry.
*I recommend this.