Photo by
mericanadesico
フォームテンプレート
<!--HTML-->
<head>
<title>お問い合わせフォームを作る</title>
</head>
<body>
<form action="program.php method="post">
<dl>
<dt>お問い合わせの種別</dt>
<dd>
<label><input type="chckbox" name="category" value="お問い合わせ”>お問い合わせ</label>
<label><input type="chckbox" name="category" value="新規お申し込み”>新規お申し込み</label>
<label><input type="chckbox" name="category" value="資料請求”>資料請求</label>
</dd>
<dt>お名前<span class="must">※</span></dt>
<dd>
<input type="text" name="name" required placeholder="田中太郎">
</dd>
<dt>ふりがな<span class="must">※</span></dt>
<dd>
<input type="text" name="kana" required placeholder="たなか たろう">
<dt>メールアドレス<span class="must">※</span></dt>
<input type="email" name="email" required placeholder="sample@test.com">
</dt>
<dt>性別</dt>
<dd>
<label><input type="radio" name="gender" value="男">男</label>
<label><input type="radio" name="gender" value="女">女</label>
</dd>
<dt>どこでお知りになりましたか？</dt>
<dd>
<select name="how">
<option value="チラシ・DM">チラシ・DM</option>
<option value="知り合いからの紹介"> 知り合いからの紹介</option>
<option value="その他">その他</option>
</select>
</dd>
</dl>
</body>/*CSS*/
@charaset "UTF-8";
dl{
width;990px;
border-top:1px solid #cccccc;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
}
dl dt{
float:left;
padding:1em
color:#998484;
}
dl dd{
border-bottom:1px solid #cccccc;
margin:0;
padding:1em 0 1em 18em;
}
dl dt.must{
color:#d23939
}
input[type="email"]{
wodth:50%
}
input{
font-size:1em;
padding:5px;
}
label{
margin-right:1em;
}
select{
font-size:1em;
}
textarea{
width:30em;
font-size:1 em;
padding:5px;
}
p.submit{
text-align:center
}
input[type="submit"]{
padding:20 100px;
background:#7f6666;
color:#ffffff;
font-weight:bold;
border-radius:10px;
cursor:pointer;
}
input[type="submit"]:hover{
opacity:0.8;
}