Dynamic Drive CSS Library- CSS Tableless Form

CSS Library

CSS Layouts

Web Graphics

Free 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.

Demo:

The CSS:

<style type="text/css">

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

</style>

The HTML:

<form id="myform" class="cssform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress" value="" />
</p>

<p>
<label for="comments">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<p>
<label for="comments">Sex:</label>
Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br />
</p>

<p>
<label for="comments">Hobbies:</label>
<input type="checkbox" name="hobby" /> Tennis<br />
<input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />
<input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />
</p>

<p>
<label for="terms">Agree to Terms?</label>
<input type="checkbox" id="terms" class="boxes" />
</p>

<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="reset" />
</div>

</form>

Code Info

Rate this code:

Date Posted: 06/20/2006

Revision History: None

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.