Tableless Contact Form sample01

テーブルを使わないお問い合わせフォームが流行ってると聞いて。
モノトーンでシンプルめ。左に項目、右に入力エリアが並ぶオーソドックスなやつ。
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>
<input name="company" type="text" id="company" size="50" /></li>
<li><label for="name">お名前（ご担当者名）</label>
<input name="name" type="text" id="name" size="50" /></li>
<li><label for="position">部署・役職名</label>
<input name="position" type="text" id="position" size="50" /></li>
<li><label for="address">住所</label>
<input name="address" type="text" id="address" size="50" /></li>
<li><label for="tel">電話番号</label>
<input name="tel" type="text" id="tel" size="50" /></li>
<li><label for="URL">URL</label>
<input name="URL" type="text" id="URL" size="50" /></li>
<li><label for="Mail">E-Mail</label>
<input name="Mail" type="text" id="Mail" size="50" /></li>
<li><label for="message">ご相談内容</label>
<textarea name="message" id="message" cols="50" rows="10"></textarea></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:630px;
	margin:10px auto;
	text-align:left;
}
legend {
	padding:0.3em;
	visibility:hidden;
	display:none;
}
.form li div {
	line-height:1.4;
	margin-left:165px;
}
.form li{
	padding:3px 0;
	list-style:none;
	display:inline-block;
}
.form li:after {
	content:".";
	height:0px;
	clear:both;
	display: block;
	visibility:hidden;
}
.form small { 
	font-size:77%;
	color:#666;
	padding-left:1em;
}
label {
	padding:5px 5px 5px 0;
	border-right:solid 5px #ccc;
	margin:0 5px 0 0;
	width:150px;
	float:left;
	display: block;
	text-align:right;
	background-color:#efefef;
}
.form input,.form textarea {
	margin:0;
	border:solid 1px;
	border-color:#aaa #ddd #ddd #aaa;
	width:435px;
	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;
}
/*Safari&Opera\*/
@media all and (min-width:0px) {
    head~body .form input,head~body .form textarea{ float:right;padding:0.3em}
}
/*IE6*/
* html .form input {
	height:22px;
}
/**/