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 19 of 19 pages « First < 17 18 19

play roulette
play blackjack
movie download horse race betting
iphone wallpapers forex trading systems
alternative energy play blackjack
online roulette play craps
play slot machine play bingo
casinos online
slots online
online slots
online casino

Posted by zombo09 on 05/29, 08:36 PM

luxury goods

designer clothes

designer handbags

latest fashion

fashion clothes

style

fashion style

Posted by re on 05/30, 10:43 PM

既婚者

Posted by であ on 06/01, 09:44 PM

処女
処女
処女
援交
援交
援交
援助交際
SEX
セフレ
セフレ
セフレ
セックスフレンド
メル友募集掲示板
メル友募集掲示板
メル友募集掲示板
メル友募集掲示板
人妻
既婚者
援交
援助交際
メル友募集掲示板
メル友募集掲示板

Posted by 処女 on 06/01, 09:45 PM

Posted by 出会い on 06/02, 05:27 AM

Posted by 出会い on 06/02, 06:11 PM

<a >深圳搬家公司</a>
<a >深圳搬家</a>
<a >深圳空调维修</a>
<a >深圳罗湖搬家公司</a>
<a >深圳福田搬家公司</a>
<a >深圳南山搬家公司</a>
<a >深圳盐田搬家公司</a>
<a >深圳宝安搬家公司</a>
<a >深圳龙华搬家公司</a>
<a >深圳龙岗搬家公司</a>
<a >深圳布吉搬家公司</a>
<a >深圳装卸公司</a>
<a >深圳吊车公司</a>
<a >深圳尾板车出租</a>
<a >深圳吊装公司</a>
<a >深圳搬厂公司</a>

<a >深圳空调加雪种</a>
<a >深圳空调安装</a>
<a >深圳空调拆装</a>
<a >深圳海尔空调维修</a>
<a >深圳LG空调维修</a>
<a >深圳新科空调维修</a>
<a >深圳志高空调维修</a>
<a >深圳三菱空调维修</a>
<a >深圳澳柯玛空调维修</a>
<a >深圳格力空调维修</a>
<a >深圳春兰空调维修</a>
<a >深圳大金空调维修</a>
<a >深圳日立空调维修</a>
<a >深圳松下空调维修</a>
<a >深圳三星空调维修</a>
<a >深圳索尼空调维修</a>
<a >深圳中央空调维修</a>
<a >深圳奥克斯空调维修</a>
<a >深圳美的空调维修</a>
<a >深圳空调清洗</a>
<a >空调维修</a>

Posted by eh on 06/02, 11:24 PM

A nice solution, thanks. I would probably still use tables for a more complex form than this though as it's just easier to lay out the different fields and associated text. However, I now use CSS as much as possible within my tables, so the HTML remains fairly light.

Posted by RoryY on 06/04, 01:11 PM

戦国無双3 攻略
カイロプラクティック
岩盤浴
ゲルマニウム温浴
ゲルマニウム温浴
禁煙
筋肉痛
生理痛
発達障害
ふるさと青汁
酸素カプセル
電子タバコ
電子タバコ
整骨院
生理痛
ブライダルネット
ノッツェ
オーネット
パートナーエージェント
ツヴァイ
結婚相談所
婚活
ブライダルネット
オーネット
パートナーエージェント
ツヴァイ
結婚式場　東京
債務整理
日経225
単身赴任
オイシックス
オイシックス
カフェ
オイシックス
金券ショップ
初めて　海外旅行
ひまわり証券　日経225
トレイダーズ証券日経225
トリア
カルジェル
ROSY
プラセンタ100
ネイルサロン
ネイルスクール
クリアエステヴェール
アテニア
PRO BIO
よか石けん
マイクロダイエット
マイクロダイエット
よか石けん

Posted by zol on 06/04, 04:45 PM

Comment Pages 19 of 19 pages « First < 17 18 19

Commenting is not available in this weblog entry.