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