Tableless Contact Form sample02

テーブルを使わないお問い合わせフォームのサンプル。
シンプルなブルー系。タブっぽいラベル。
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&#91;&#93;" type="radio" value="電話" id="cont" />電話
<input name="cont&#91;&#93;" 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