Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

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

nice one and straightforward implementaiton.
but input[type="text"] won't work in IE and will it cause any css validation problem??
Posted by freemind on 07/30, 09:17 PM
Very clean and simple, hope more people find this site!
Posted by zae on 08/01, 03:04 PM
Clean work. well done!
Posted by ed on 08/18, 11:45 AM
how do i get this form to send the feedback in a email to me? plz anyone have any idea.
many thanks
Posted by DMX on 08/23, 05:10 PM
You will need a server side scripting language like PHP or ASP to do that. You cannot rely on action="mailto:me@example.com" since that would require a configured email client.

Anyway, check out w3schools[dot]com or PHP[dot]net to learn more.
Posted by Michiel on 08/23, 06:27 PM
Oh now i got it. Thnaks Michiel for ur help.
Posted by DMX on 08/25, 05:03 PM
Hi,
This is very nice template of form but how would i be able to do validation of the fields, like checking if the email address is entered correctly, like that

can ne one help me with that plz

Thanks
Kiran
Posted by Kiran Shaikh on 09/05, 02:07 PM
Very good.
I like it too much.
BUT:
How do I get the feedback to a email from the submit button?
Posted by Flavio Macedo on 09/10, 11:57 PM
yea! How do I get the feedback to a email from the sumbmit button !?
Posted by Mansor on 10/12, 03:23 PM
CSS is giving me a headache. What really is the correct one to use,
a break or paragraph? I came from another site which gives a tableless form but uses br
--- and one comment said it's wrong to use
it. And now here paragraph is used --- someone says it's wrong again. Great. But I'm using this code anyway.
Posted by Erika on 10/23, 04:23 AM

Comment Pages 3 of 19 pages  <  1 2 3 4 5 >  Last »

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