Dynamic Drive CSS Library- CSS Tableless Form

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

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 9 of 19 pages « First < 7 8 9 10 11 > Last »

This is a Usually Form. I m create this Form one minute in NotePad! :(

Posted by Anatoliy on 11/06, 07:45 AM

Great article, nicely styled form, thank you.

One question regarding the CSS:-

In the rule for .cssform p you have

.cssform p{
height: 1%;
}

Forgive me but a lot of the article on the 3-pixel bug talks about the Holly Hack which uses height:1% and some selector shennanigans to apply it only to IE but you're applying it to all browsers?

Why doesn't Firefox, et. al. crop the content of paragraphs at 1% height? Firefox seems to expand the paragraphs to match the content even though you're explicitly setting a height?

I thought only IE (before 7) did this and it was not correct in terms of the W3C spec as the paragraph shouldn't auto-expand?

Any clarification on this much appreciated.

Posted by Sprogz on 11/07, 04:38 AM

WOW! I've been looking how to do this for a while. I am so ingrained to using tables and really want to move away from that and rely more on CSS. Thanks for making this available.

Posted by Christopher Kirk on 11/08, 07:07 AM

Nice for but there is no code to send the e-mail to.

Posted by Day on 12/06, 02:55 AM

In reply to Chris Hutton above: yes, I have the same exact problem in IE7 only. Your problem.gif url is still good and looks like you may have resolved the issue, but the css link is no longer available. So, on the off chance that you see this, mind sharing what the fix was?

Posted by Andy on 12/13, 03:05 PM

Oh, never mind. The fix is apparently to delete the line: height: 1%; in the .cssform p entry. It's not there in the inline style actually used on this html page if you view the source.

Posted by Andy on 12/13, 03:20 PM

Like AAron above, how do I e-mail this form's information back to me?

Posted by Mike on 12/17, 08:43 AM

This is a great alternative to forms. Works very well and the form is easily designed. Well done!

Posted by Gavin Hardy on 01/01, 08:04 AM

Looks good. As a reply to Dustin Halstead, that is not always the case. I can reproduce this form with table-code equaling less total bytes than this example ;)

Posted by scott on 01/13, 11:47 PM

This really is a bad way of doing it. CSS is better to use than tables but the css that you have used is pointless

Posted by Matt on 01/20, 08:29 AM

Comment Pages 9 of 19 pages « First < 7 8 9 10 11 > Last »

Commenting is not available in this weblog entry.