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 4 of 19 pages « First  <  2 3 4 5 6 >  Last »

wowo this is so cool, it has taken me ages to get info on how to do this form and now i am glad that i dont have to waste much time in implementing it.

great work and thanks all.
Posted by rahim haji on 10/27, 01:43 PM
why my computer is not doing this code??
Posted by sdffsdfsdfsdf on 10/31, 08:56 PM
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?
Posted by drifter on 11/06, 05:24 PM
Nice set of code, is there any way of getting it to align centered? I can't find it!
Posted by James Doc on 11/11, 08:56 AM
hello, how to change the checkbox display style? i try used css class to change its border color, it only add a wide border can't remove original border workable. please and thanks.
Posted by tomasli on 11/12, 11:07 PM
Really nice solution, and very user-friendly. Possible to use even if the customer has turned of his stylesheet. And it follows the latest rules of design and usability.
Posted by Maria on 11/23, 01:55 PM
Easy to read and a breeze to setup, many thanks!
Posted by Claude Gelinas on 12/05, 01:13 AM
Where do i insert the email address?
And make sure that can only be submitted if agree to terms is checked.
Tks
Posted by Gel Smith on 12/07, 01:45 PM
I would like to know how to write the coding for a page for submitting comments and show in immediately on the return page.
Posted by karen on 12/12, 08:48 PM
I like this script! Very usable
Posted by Jessy on 12/13, 01:15 PM

Comment Pages 4 of 19 pages « First  <  2 3 4 5 6 >  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.