テーブルを使わないお問い合わせフォームのサンプル。
シンプルなブルー系。タブっぽいラベル。
Checked(win):IE6,IE7,FireFox2,Opera9,Safari
Mac未確認。
<fieldset> <legend>Contact details</legend> <form action="" method="post" class="form" id="contactform"> <ul> <li><label for="company">会社名</label> <div><input name="company" type="text" id="company" size="50" /></div></li> <li><label for="name">お名前(ご担当者名)</label> <div><input name="name" type="text" id="name" size="50" /></div></li> <li><label for="position">部署・役職名</label> <div><input name="position" type="text" id="position" size="50" /></div></li> <li><label for="address">住所</label> <div><input name="address" type="text" id="address" size="50" /></div></li> <li><label for="tel">電話番号</label> <div><input name="tel" type="text" id="tel" size="50" /></div></li> <li><label for="url">URL</label> <div><input name="url" type="text" id="url" size="50" /></div></li> <li><label for="email">E-Mail</label> <div><input name="email" type="text" id="email" size="50" /></div></li> <li><label for="message">ご相談内容</label> <div><textarea name="message" id="message" cols="50" rows="10"></textarea></div></li> <li><label for="cont">ご連絡方法</label> <div><input class="check" name="cont[]" type="radio" value="電話" id="cont" />電話 <input name="cont[]" type="radio" value="メール" class="check" />メール</div></li> <li><label for="time">ご連絡希望時間</label> <div><input class="check" name="time" type="checkbox" value="とにかく早く" />とにかく早く連絡が欲しい<br /> <input class="check" name="time" type="checkbox" value="都合" /><input class="text" name="time" type="text" id="time" size="10" />だと都合が良い<small>※例:「水曜日午前」「夕方5時以降」「土曜日」など</small> </div></li> </ul> <div class="button"><button id="submit" type="submit">送信</button><button type="reset" id="reset">リセット</button></div> </form> </fieldset>
*{ margin:0; padding:0; border:0; text-decoration:none; line-height:1; font-size:13px; font-style:normal; } body { color:#424242; background-color:#FFFFFF; text-align:center; } h1,address,a{color:#C8C8C8;font-size:100%;} fieldset { width:500px; margin:10px auto; text-align:left; } legend { padding:0.3em; visibility:hidden; display:none; } label { padding:5px; margin:0; width:140px; display: block; background-color:#E3F3FB; color:#053450; } .form li div { line-height:1.4; background-color:#E3F3FB; padding:5px; } .form li{ padding:6px 0; list-style:none; display:inline-block; background:url(img/tform02_bg.gif) no-repeat 150px 5px; } .form li:after { content:"."; height:0px; clear:both; display: block; visibility:hidden; } .form small { font-size:77%; color:#666; padding-left:1em; } .form input { width:300px; } .form textarea { width:480px; } .form input,.form textarea { margin:0; border:solid 1px; border-color:#aaa #ddd #ddd #aaa; font-size:93%; padding:3px; line-height:1.4; } .form input:focus,.form textarea:focus { background-color: #E2E8FE; border-color:#91A9FB #B4C4FC #D0DAFD #9EB4FC; } .form input.check { width:auto; margin:0 2px; border:none; float:none; } .form input.text { width:auto; margin:0 2px; color:#FA749C; float:none; } div.button { text-align:center; margin-top:20px; } div.button button#submit { border:solid 2px; border-color:#CAD6F0 #7C99DC #889FD7 #CAD6F0 ; width:100px; background-color:#AABCE8; margin:0 10px 0 0; line-height:1.4; cursor:pointer; } div.button button#submit:hover { border-color:#C4E0F0 #8DC5E2 #8FBEE0 #C4E0F0; background-color:#A9D2E9; } div.button button#reset { border:solid 2px; border-color:#ddd #aaa #aaa #ddd; width:100px; background-color:#ccc; line-height:1.4; margin:0 10px 0 0; cursor:pointer; } div.button button#reset:hover { background-color:#efefef; } /*IE6*/ * html .form input { height:22px; } * html .form li { background:url(img/tform02_bg.gif) no-repeat 140px 5px; }
背景画像» tform02_bg.gif