html5 入力フォームのテンプレート！[表型]

都道府県、生年月日など、入力フォームのhtmlをコピーして使えます。

同意のチェックがないと先へ進めません。
ヘッダーで、jquery.jsと後述のformcheck.jsを読み込んでいます。
※requiredで必須項目をブラウザ側でcheck
※placeholder=""で入力前メッセージを表示
※focus時とcheck時のstyle設定
デモページは、同意のチェックがないとボタンが無効になっています。
詳しくは、チェック（同意）しないとボタンが有効になりませんをご参考ください。
こちらも参考になりました。今どきの入力フォームはこう書く！ HTMLコーダーが抑えるべきinputタグの書き方まとめ
【更新：2016/03/30】

デモページへ

JSを読み込みます

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/formcheck.js"></script>

[formcheck.js]JavaScript

$(function(){
		   //送信ボタンの無効、チェックボックスを外す
			$(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
			$(".mod_form_importance_btn input:checkbox").attr('checked',false);
		   //チェックボックスがクリックされると送信ボタン有効
			$(".mod_form_importance_btn label,.mod_form_importance_btn input").click(function(){
				if($(".mod_form_importance_btn input:checkbox").attr('checked')==true){
					$(".mod_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
				}else{
					 $(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
					}
			   })
		});

HTMl

<div class="mod_form">
<p class="point"><span class="ex_essential">[必須]</span>項目は必ずご入力ください。</p>
<form method="post" action="">
<table>
<tbody>
<tr>
<th><label for="item">お問い合わせ項目</label>&nbsp;<span class="ex_essential">[必須]</span></th>
<td><select id="item" required="required">
<option value="" selected="selected">--選択してください--</option>
<option value="項目1">項目1</option>
<option value="項目2">項目2</option>
<option value="項目3">項目3</option>
<option value="項目4">項目4</option>
<option value="項目5">項目5</option>
</select></td>
</tr>
<tr>
<th><label for="name">名前</label>&nbsp;<span class="ex_essential">[必須]</span></th>
<td><input type="text" id="name" value="" required="required" autocomplete="name"/></td>
</tr>
<tr>

<th><label for="kana">フリガナ</label>&nbsp;<span class="ex_essential">[必須]</span></th>
<td><input type="text" id="kana" value="" required="required"/></td>
</tr>
<tr>
<th id="character">性別</th>
<td>
<div role="radiogroup">
<label for="character_m"><input type="radio" value="男性" id="character_m" aria-describedby="character"/>男性</label>&nbsp;
<label for="character_w"><input type="radio" value="女性" id="character_w" aria-describedby="character"/>女性</label>
</div>
</td>
</tr>
<tr>

<th><label for="email">メールアドレス</label>&nbsp;<span class="ex_essential">[必須]</span></th>
<td><input type="text" id="email" value="" required="required" aria-describedby="emailNotice" autocomplete="email"/><br />
<span id="emailNotice" class="ex_comment">例：info@gmai.com</span></td>
</tr>
<tr>
<th><label for="emailcheck">メールアドレス確認</label>&nbsp;<span class="ex_essential">[必須]</span></th>
<td><input type="text" id="emailcheck" value="" required="required" aria-describedby="emailcheckNotice"/><br />
<span id="emailcheckNotice" class="ex_comment">確認のため再度ご記入ください</span></td>
</tr>
<tr>

<th><label for="zipcode">郵便番号</label></th>
<td><input type="text" id="zipcode" value="" aria-describedby="zipcodeNotice"/><br />
<span id="zipcodeNotice" class="ex_comment">例：571-0212</span></td>
</tr>
<tr>
<th><label for="address01">都道府県</label>&nbsp;<span class="ex_essential">[必須]</span></th>
<td><select id="address01" required="required">
<option value="" selected="selected">--選択してください--</option>
<optgroup label="北海道・東北">
	<option value="北海道">北海道</option>
	<option value="青森県">青森県</option>
	<option value="秋田県">秋田県</option>
	<option value="岩手県">岩手県</option>
	<option value="山形県">山形県</option>
	<option value="宮城県">宮城県</option>
	<option value="福島県">福島県</option>
</optgroup>
<optgroup label="甲信越・北陸">
	<option value="山梨県">山梨県</option>
	<option value="長野県">長野県</option>
	<option value="新潟県">新潟県</option>
	<option value="富山県">富山県</option>
	<option value="石川県">石川県</option>
	<option value="福井県">福井県</option>
</optgroup>
<optgroup label="関東">
	<option value="茨城県">茨城県</option>
	<option value="栃木県">栃木県</option>
	<option value="群馬県">群馬県</option>
	<option value="埼玉県">埼玉県</option>
	<option value="千葉県">千葉県</option>
	<option value="東京都">東京都</option>
	<option value="神奈川県">神奈川県</option>
</optgroup>
<optgroup label="東海">
	<option value="愛知県">愛知県</option>
	<option value="静岡県">静岡県</option>
	<option value="岐阜県">岐阜県</option>
	<option value="三重県">三重県</option>
</optgroup>
<optgroup label="関西">
	<option value="大阪府">大阪府</option>
	<option value="兵庫県">兵庫県</option>
	<option value="京都府">京都府</option>
	<option value="滋賀県">滋賀県</option>
	<option value="奈良県">奈良県</option>
	<option value="和歌山県">和歌山県</option>
</optgroup>
<optgroup label="中国">
	<option value="岡山県">岡山県</option>
	<option value="広島県">広島県</option>
	<option value="鳥取県">鳥取県</option>
	<option value="島根県">島根県</option>
	<option value="山口県">山口県</option>
</optgroup>
<optgroup label="四国">
	<option value="徳島県">徳島県</option>
	<option value="香川県">香川県</option>
	<option value="愛媛県">愛媛県</option>
	<option value="高知県">高知県</option>
</optgroup>
<optgroup label="九州・沖縄">
	<option value="福岡県">福岡県</option>
	<option value="佐賀県">佐賀県</option>
	<option value="長崎県">長崎県</option>
	<option value="熊本県">熊本県</option>
	<option value="大分県">大分県</option>
	<option value="宮崎県">宮崎県</option>
	<option value="鹿児島県">鹿児島県</option>
	<option value="沖縄県">沖縄県</option>
</optgroup>
</select></td>
</tr>
<tr>
<th><label for="address02">市区町村・番地</label></th>
<td><input id="address02" type="text" value="" aria-describedby="address02Notice" /><br />
<span id="address02Notice" class="ex_comment">例：神戸市北区花山南町5-2</span></td>
</tr>
<tr>
<th><label for="address03">マンション・アパート名</label></th>
<td><input type="text" id="address03" value="" aria-describedby="address03Notice" /><br />
<span id="address03Notice" class="ex_comment">例：メゾン南000号</span></td>
</tr>
<tr>
<th><label for="tel">電話番号</label>&nbsp;<span class="ex_essential">[必須]</span></th>
<td><input type="tel" id="tel" value="" required="required" aria-describedby="telNotice" /><br />
<span id="telNotice" class="ex_comment">例：0728122800</span></td>
</tr>
<tr>
<th><label for="maker">品番</label></th>
<td><select id="maker">
<option value="" selected="selected">--選択してください--</option>
<option value="001">001</option>
<option value="002">002</option>
<option value="003">003</option>
<option value="004">004</option>
<option value="005">005</option>
</select><br />
その他の品番は下記へご記入ください。<br />
<input  name="maker_etc" type="text" title="そのほかの品番はこちらへご記入ください" value="" />
</td>
</tr>
<tr>
<th><label for="date">日付</label></th>
<td><select id="date" title="年号を選択してください">
<option value="平成" selected="selected">平成</option>
<option value="昭和">昭和</option>
</select>
<select title="年を選択してください">
<option value="" selected="selected">--</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
</select>&nbsp;年

<select title="月を選択してください">
<option value="" selected="selected">--</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>&nbsp;月

<select title="日を選択してください">
<option value="" selected="selected">--</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>&nbsp;日
</td>
</tr>
<tr>

<th><label for="color">色</label></th>
<td><select id="color">
<option value="選択してください" selected="selected">--選択してください--</option>
<option value="白">白</option>
<option value="黒">黒</option>
<option value="青">青</option>
<option value="赤">赤</option>
<option value="緑">緑</option>
<option value="紫">紫</option>
<option value="紺">紺</option>
<option value="金">金</option>
<option value="銀">銀</option>
<option value="オレンジ">オレンジ</option>
<option value="ピンク">ピンク</option>
<option value="その他">その他</option>
</select><br />
その他を選択された方はご記入ください。<br />
<input type="text" title="その他を選択された方はご記入ください。" value="" />
</td>

</tr>
<tr>
<th id="like">好きなお菓子はなんですか？</th>
<td>
<div class="mod_form_listbox ex_clearfix">
<div class="mod_form_listbox_left">
<label for="checkitem1"><input type="checkbox" id="checkitem1" value="チョコレート" aria-describedby="like"/>&nbsp;チョコレート</label><br />
<label for="checkitem2"><input type="checkbox" id="checkitem2" value="ビスケット" aria-describedby="like"/>&nbsp;ビスケット</label><br />
<label for="checkitem3"><input type="checkbox" id="checkitem3" value="ラムネ" aria-describedby="like"/>&nbsp;ラムネ</label><br />
<label for="checkitem4"><input type="checkbox" id="checkitem4" value="グミ" aria-describedby="like"/>&nbsp;グミ</label><br />
<label for="checkitem5"><input type="checkbox" id="checkitem5" value="ポテトチップス" aria-describedby="like"/>&nbsp;ポテトチップス</label><br />
<label for="checkitem6"><input type="checkbox" id="checkitem6" value="おかき" aria-describedby="like"/>&nbsp;おかき</label><br />
<label for="checkitem7"><input type="checkbox" id="checkitem7" value="ポップコーン" aria-describedby="like"/>&nbsp;ポップコーン</label><br />
<label for="checkitem8"><input type="checkbox" id="checkitem8" value="わたあめ" aria-describedby="like"/>&nbsp;わたあめ</label>
<!-- mod-inputlistbox_left_end --></div>
<div class="mod_form_listbox_right">
<label for="checkitem9"><input type="checkbox" id="checkitem9" value="ケーキ" aria-describedby="like"/>&nbsp;ケーキ</label><br />
<label for="checkitem10"><input type="checkbox" id="checkitem10" value="まんじゅう" aria-describedby="like"/>&nbsp;まんじゅう</label><br />
<label for="checkitem11"><input type="checkbox" id="checkitem11" value="ガム" aria-describedby="like"/>&nbsp;ガム</label><br />
<label for="checkitem12"><input type="checkbox" id="checkitem12" value="プリン" aria-describedby="like"/>&nbsp;プリン</label><br />
<label for="checkitem13"><input type="checkbox" id="checkitem13" value="シュークリーム" aria-describedby="like"/>&nbsp;シュークリーム</label><br />
<label for="checkitem14"><input type="checkbox" id="checkitem14" value="昆布" aria-describedby="like"/>&nbsp;昆布</label><br />
<label for="checkitem15"><input type="checkbox" id="checkitem15" value="その他" aria-describedby="like"/>&nbsp;その他</label>
<!-- mod-inputlistbox_right_end --></div>
<!-- mod-inputlistbox_end --></div>
</td>
</tr>
<tr>
<th><label for="memo">お問い合わせ内容</label></th>
<td><textarea rows="10" cols="50" id="memo" placeholder="お問い合わせ内容をご自由にお書きください。"></textarea></td>
</tr>
</tbody>
</table>

<div class="mod_form_importance">
<h2>「個人情報保護方針」と「当社における個人情報の取扱について」</h2>
<p>上記のお問い合わせフォームから情報を送信する前に、下記の「個人情報保護方針」と「当社における個人情報の取扱について」をご一読の上、「個人情報保護方針」にご同意頂ける場合は、「同意する」にチェックをお願いします。</p>
<div class="mod_form_importance_txt">
<ol>
<li><h3>会社名および個人情報保護管理者</h3>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</li>
<li><h3>個人情報の利用目的</h3>
<ul>
<li>・箇条書き</li>

<li>・箇条書き</li>
<li>・箇条書き</li>
</ul>
</li>
<li><h3>個人情報の提供</h3>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</li>
<li><h3>個人情報の取扱いの委託について</h3>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</li>
<li><h3>個人情報を入力するにあたっての注意事項 </h3>

<ol>
<li>（1）文章が入ります。</li>
<li>（1）文章が入ります。</li>
<li>（1）文章が入ります。</li>
</ol>
</li>
<li><h3>本人が容易に認識できない方法による個人情報の取得</h3>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</li>
<li><h3>開示対象個人情報の開示等および問合せ窓口について </h3>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>

</li>
</ol>
<!-- mod_form_importance_txt_end --></div>
<div class="mod_form_importance_btn">
<p class="check">
<input name="privacy_s" type="hidden" value="none" />
<label for="privacy"><input type="checkbox" id="privacy" name="privacy_s[1]" value="同意する" />&nbsp;個人情報保護方針に同意する</label>
</p>
<!-- mod_form_importance_btn_end --></div>
<!-- mod_form_importance_end --></div>



<div class="mod_form_btn">
<p><input type="image" src="img/send.gif" alt="確認する" onMouseOver="this.src='img/send_on.gif';" onMouseOut="this.src='img/send.gif'"></p>
<!--mod_form_btn_end--></div>

</form>
<!--mod_form_end--></div>

CSS

/* 必須
-----------------------------------------*/
.ex_essential{
	color:#CC0000;
	font-weight:normal;
}
/* エラー
-----------------------------------------*/

/* 注釈
-----------------------------------------*/
.ex_comment{
	color:#666;
}
/* フォームレイアウト
-----------------------------------------*/
.mod_form{
	margin:0 auto;
	margin-bottom:20px;
	padding:20px;
	width: 700px;
	border:solid 5px #EEE;
}
.mod_form p.point{
	text-align:right;
}
.mod_form table{
	width:100%;
	border-collapse:separate;
	border-spacing:2px;
}
.mod_form table tr th{
	padding:10px;
	white-space: nowrap;
	font-weight:bold;
	vertical-align: top;
	border-bottom:solid 1px #C1D0E3;
	background-color:#EBF0F6;
}
.mod_form table tr td{
	width:70%;
	padding:10px;
	border-bottom:solid 1px #B6D1F5;
}

/* フォーム内2段組
-----------------------------------------*/
.mod_form_listbox{
	width:100%;
}
.mod_form_listbox_left{
	float:left;
	width:50%;
}
.mod_form_listbox_right{
	float:left;
	width:50%;
}

/* 入力パーツ
-----------------------------------------*/	
label {
  cursor: pointer;
}
select#item,
select#address01,
select#maker,
select#color{
	width:250px;
}
select#nengou,
select#year,
select#month,
select#day{
	width:60px;
}
input,
textarea{
	border:solid 1px #CCCCCC;
}
input#character_m,
input#character_w,
.mod_form_listbox input{
	border:none;
}

input#address02,
input#bill{
	width:350px;
	height:1.4em;
}
input#name,
input#kana,
input#email,
input#emailcheck,
input#maker_etc,
input#color_etc{
	width:250px;
	height:1.4em;
}
input#zipcode,
input#tel{
	width:150px;
	height:1.4em;
}
textarea{
	width:350px;
}
/* フォーカス・チェック
-----------------------------------------*/
input:focus,
textarea:focus{
	background-color:#FFFFCC;
}
input:checked + label{
	background-color:#FFFFCC;
	font-weight:bold;
}

/* 重要なお知らせの同意
-----------------------------------------*/
.mod_form_importance{
	margin:20px 0 0 0;
	padding:10px;
	border:double 3px #CCC;
	background-color:#DDD;
}
.mod_form_importance h2{
	font-weight:bold;
}
.mod_form_importance_txt{
	width:634px;
	height:250px;
	overflow:scroll;
	margin:10px 0 20px 0;
	padding:10px 20px 15px 20px;
	background-color:#FFF;
}
.mod_form_importance_txt h3{
	margin:10px 0 5px 0;
	font-weight:bold;
	border-bottom:solid 1px #DDD;
}
.mod_form_importance_btn{
	text-align:center;
}

/* 送信ボタンとエラー表示
-----------------------------------------*/
.mod_form_btn{
	margin:20px 0 0 0;
	text-align:center;
}

.mod_form_btn input#back,
.mod_form_btn input#submit{
	width:150px;
	padding:5px;
}


/* clearfix：float解除＆親要素に高さを算出させる
-----------------------------------------*/
.ex_clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}
.ex_clearfix {
  min-height: 1px;
}
* html .ex_clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}