Dynamic Drive CSS Library- CSS Tableless Form

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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

Thanks so much for the code. This is terrifically useful, considering I am re-writing our webforms right now (which are ALL in tables...grrrrr).

Thanks for sharing the love.

Posted by Shane on 06/21, 03:42 PM

Very nice code indeed! I really love css and no tables. I've made my website (froggydomains.com) tableless and now I'm working on converting every internal page I can to make tableless also.

Posted by Jonathan on 06/21, 04:06 PM

awesome, the comment thing i am typing in right now, i need a code like this, anybody please email it to me, watchyougetowned@gmail.com

i wanna make a picture replying website and hopefully upgrade it to a site like myspace and facebook, no idea what to name it though xD

Posted by tristan on 06/29, 11:14 AM

What are Your Comments About My website??

Posted by Rohit Bansal on 07/02, 11:22 AM

can this one works in blogger.com?

Posted by jack on 07/28, 11:38 AM

can this css comment form work in blogger.com

Posted by jack on 07/28, 11:40 AM

Thanks man,
just what I was looking for. Worked like a charm Thanks so much...

Posted by LinkDir on 07/31, 02:53 PM

I missed the answer to Aaron's question. How do you get the code to submit to an email address? Thanks.

Posted by cozzas on 08/05, 07:50 PM

i was wondering.
i link the submit button to my email adress but then when i get the email with feedback its in some .att format.
does this happen to any1 else and whats a possible solution.

Posted by Jim on 08/07, 09:48 AM

just reporting that im getting the 3px bug on ie7 too, without the fix in place.

Posted by richard on 08/07, 12:39 PM

Comment Pages 7 of 19 pages « First < 5 6 7 8 9 > Last »

Commenting is not available in this weblog entry.