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 15 of 19 pages « First < 13 14 15 16 17 > Last »

How do you get the submitted form to go to an email address?

Posted by ashley on 02/13, 09:51 PM

深圳无名搬家公司有工商局批准的一家深圳搬家公司，主要为你深圳搬家。大型搬家公司
深圳www.wumingbanjia.cn
<a href=http://www.sz-hrzbj.cn>深圳搬家</a>
<a href=http://www.szhrz.com>深圳搬家公司</a>
<a href=http://www.hrzbq.com>搬家公司</a>
<a href=http://www.hrzbq.com/banwu.htm>深圳搬屋公司</a>
<a href=http://www.sz-hrzbj.cn/szdcgs.htm>深圳吊车公司</a>
<a href=http://www.hrzbq.com/szwbcsz.htm>深圳尾板车出租</a>
<a href=http://www.hrzbq.com/szdzgs.htm>深圳吊装公司</a>
<a href=http://www.hrzbq.com/szbcgs.htm>深圳搬厂公司</a>
<a href=http://www.sz-hrzbj.cn/lhbjgs.htm>罗湖搬家公司</a>
<a href=http://www.sz-hrzbj.cn/ftbjgs.htm>福田搬家公司</a>
<a href=http://www.sz-hrzbj.cn/nsbjgs.htm>南山搬家公司</a>
<a href=http://www.sz-hrzbj.cn/ytbjgs.htm>盐田搬家公司</a>
<a href=http://www.sz-hrzbj.cn/babjgs.htm>宝安搬家公司</a>
<a href=http://www.sz-hrzbj.cn/szlhbj.htm>龙华搬家公司</a>
<a href=http://www.sz-hrzbj.cn/lgbjgs.htm>龙岗搬家公司</a>
<a href=http://www.sz-hrzbj.cn/bjbjgs.htm>布吉搬家公司</a>
<a href=http://www.wumingbanjia.cn>深圳搬家公司</a>
<a href=http://www.sz-hrzbj.cn>深圳搬家公司</a>

Posted by HRZ on 02/16, 10:31 PM

キャッシング
レーシック
トライアルキット
翻訳会社東京
FX的印象
性病を考えるリンク集
乳がん
ウィークリーマンション
ネット証券
プチ整形
くりっく365
生理痛
銀行系キャッシング
出在LASIK
クレジットカード
品川レーシック
猫好きのお気に入り
ゴールドカード
lasik
消費者金融

Posted by karen on 02/19, 01:27 AM

hi,guy this site maple-story-mesos.com it is about online game's web,we offer the news and important cheats,The main we sell <a href=http://www.maple-story-mesos.com>maplestory mesos</a>,if u want to <a href=http://www.maple-story-mesos.com>buy maplestory mesos</a>,u need <a href=http://www.maple-story.org>buy maplestory mesos</a> from this site,it is cheapest,right,u want buy <a href=http://www.maple-story-mesos.com>maple story mesos</a>,<a href=http://www.maple-story-mesos.com>cheap maplestory mesos</a>,plz click here: <a href=http://www.maple-story.org>maple story mesos</a>,it is cool,isn't it?everyone who play <a href=http://maplestory.virgolds.com>maplestory mesos</a> and want buy <a href=http://maplestory.virgolds.com>maple story mesos</a> can get some help from our.We have mass available stock of <a href=http://www.maple-story.org>maple story mesos</a> on most of the servers, so that we can do a really instant way of <a href=http://maplestory.virgolds.com>buy maplestory mesos</a> delivery. We know what our buyers need so we offer an instant way of cheap <a href=http://maplestory.virgolds.com>maple story mesos</a>,the <a href=http://maplestory.virgolds.com>cheap maplestory mesos</a> delivery.lol…

Posted by maple story mesos on 02/19, 08:03 PM

hi,guy this site maple-story-mesos.com it is about online game's web,we offer the news and important cheats,The main we sell maplestory mesos,if u want to buy maplestory mesos,u need buy maplestory mesos from this site,it is cheapest,right,u want buy maple story mesos,cheap maplestory mesos,plz click here: maple story mesos,it is cool,isn't it?everyone who play maplestory mesos and want buy maple story mesos can get some help from our.We have mass available stock of maple story mesos on most of the servers, so that we can do a really instant way of buy maplestory mesos delivery. We know what our buyers need so we offer an instant way of cheap maple story mesos,thecheap maplestory mesos delivery.lol…

Posted by maplestory mesos on 02/19, 08:04 PM

I am so glad to read such a nice post, I was looking for such type of post since a long time. Thanks for the information.
Secure Disk - Powerful encryption software with pre-boot authentication secures 100% of your hard disk drive, including the OS.

Posted by Secure Disk on 02/24, 09:39 AM

The labels most certainly do work, at least in FX 1.5.0.4.
I think the paragraphs are required for validity, though I could be mistaken.
http://endxsoftware.com

Posted by Visitor on 02/27, 08:47 AM

アルピナウォーター
クリティア
クリスタルクララ
オーケンウォーター
ハワイアンウォーター
ウォーターサーバー　静岡
ウォーターファクトリー
ガソリンカード
ワンセグ
オンラインゲーム
FF11　攻略
ハンターハンター
パワプロ2009　攻略
龍が如く3　攻略
婚活
婚活
エコスモーカー
電子タバコ
エコスモーカー
電子タバコ
ロリポップ
ロリポップ
ロリポップ
ロリポップ
イカ釣り
新幹線　割引
新幹線　割引
海外旅行
ネイルサロン
ネイルサロン
マイクロダイエット
マイクロダイエット
カルジェル
雑穀ダイエット
バセドウ病
ベーチェット病
摂食障害
合併症
橋本病
発達障害
川崎病
血栓症
メニエール病
飛蚊症
パニック障害
人格障害
肋間神経痛
神経痛
睡眠障害
多発性硬化症

Posted by zol on 03/08, 06:43 AM

アダルトDVD
中古ビデオ
中古DVD
AV
FAプロ
二宮沙樹
美花ぬりぇ
2
gazou
デスメタル
アダルトDVD
中古DVD

Posted by asdxcvxcv on 03/16, 03:04 AM

掲示板-BlackBerry-出会い系サイト「une rencontre」週刊セフレ探しセフレ探しサイト「セフレがポン!!」セフレ探しBANDセフレ探しへGO!!無料セフレ探しサイト掲示板【sefree】あなたのセフレ探しのお手伝い出会い系サイト案内「Love music」セフレ探し専門サイト【パパラッチ】セフレ探しならお任せ!!「セフレ王国」セフレ探しサイト【ジョニー】安心･安全･無料のセフレ探し人妻探し専門出会い系サイト『人妻ONLY』優良出会い系サイト案内所~ポポロン~メメ

Posted by セフレ探し on 03/17, 09:55 PM

Comment Pages 15 of 19 pages « First < 13 14 15 16 17 > Last »

Commenting is not available in this weblog entry.