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

nice coding, didn't know the .cssform input[type="text"], but sadly it is not fully supported.

Posted by tableless on 03/23, 09:46 AM

Ahah! You've just made my weblife a little easier. I love to do Javascripts and CSS is just the perfect fit in for dynamic content! This nice little piece makes it a snap for formatting my forms. If wish to change the appearance or dynamically update the characteristics of several forms at once, I can now do it just once instead of redoing each and every form separately. Waaaay Cool!

Posted by Jim S Smith on 04/10, 02:13 AM

Thanks, very helpful to me.

Posted by Evren on 04/23, 09:19 AM

Ok I need to know, in the HTML side of the form, what part do I need to edit in order to get the form to go to my email address instead of a new link?

Posted by Bren on 05/31, 03:13 AM

Well I got it to send to my email but when it does it attaches this file and I cannot view the file. So how do I get it to show the form on the email?

Posted by Bren on 06/02, 02:14 PM

How do you direct it to your email address?

Posted by Channing on 06/04, 10:51 AM

Use this code:

<form id="form" class="cssform" name="form" action="mailto:you@somewhere.net" onsubmit="mailto:you@somewhere.net" method="post">

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

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

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

<label for="comments">Gender:</label>
Male: <input type="radio" name="sex">

Female: <input type="radio" name="emailaddress">

<label for="comments">Type Needed:</label>
<input type="checkbox" name="comments"> Custom

<input type="checkbox" name="hobby" class="threepxfix"> Adult

<input type="checkbox" name="hobby" class="threepxfix"> Child

<label for="terms">Agree to Terms</label> <input type="checkbox" id="terms" class="boxes">
<form METHOD="link" ACTION="mailto:you@somewhere.net"> <INPUT TYPE="submit" VALUE="Submit"></FORM>

Thats what I used. Just insert your email where it says "you@somewhere.net" The only down fall to this is that it sends an attachment of the form, but my computer wont read the attatchment. If anyone has a fix to that, this would be great.

Posted by Bren on 06/04, 11:11 AM

Oh!! ok!! thx!!!!!

Posted by Channing on 06/05, 11:28 AM

Nice code and I don't care what anybody says... if it isn't a spreadsheet looking object, use css. If you use the words 'build' or 'layout', you need css. I am pretty new to css but have been building tableless websites now for about 6 months and even converting old table layout websites to tableless and I absolutely wonder where have I been all these years looking back. Thanks for the form. This is my first form build in css and I am so looking forward to building a feedback form for our corporate intranet. THANKS!

Posted by Jonathan on 06/06, 11:34 AM

love the simple form!
I also like the comments form you have here that I am filling out.
Can I get this code. I want people to post comments to stories on my site.

Posted by MoeRinging on 06/12, 02:57 PM

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

Commenting is not available in this weblog entry.