都道府県、生年月日など、入力フォームの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> <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> <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> <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> <label for="character_w"><input type="radio" value="女性" id="character_w" aria-describedby="character"/>女性</label> </div> </td> </tr> <tr> <th><label for="email">メールアドレス</label> <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> <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> <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> <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> 年 <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> 月 <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> 日 </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"/> チョコレート</label><br /> <label for="checkitem2"><input type="checkbox" id="checkitem2" value="ビスケット" aria-describedby="like"/> ビスケット</label><br /> <label for="checkitem3"><input type="checkbox" id="checkitem3" value="ラムネ" aria-describedby="like"/> ラムネ</label><br /> <label for="checkitem4"><input type="checkbox" id="checkitem4" value="グミ" aria-describedby="like"/> グミ</label><br /> <label for="checkitem5"><input type="checkbox" id="checkitem5" value="ポテトチップス" aria-describedby="like"/> ポテトチップス</label><br /> <label for="checkitem6"><input type="checkbox" id="checkitem6" value="おかき" aria-describedby="like"/> おかき</label><br /> <label for="checkitem7"><input type="checkbox" id="checkitem7" value="ポップコーン" aria-describedby="like"/> ポップコーン</label><br /> <label for="checkitem8"><input type="checkbox" id="checkitem8" value="わたあめ" aria-describedby="like"/> わたあめ</label> <!-- mod-inputlistbox_left_end --></div> <div class="mod_form_listbox_right"> <label for="checkitem9"><input type="checkbox" id="checkitem9" value="ケーキ" aria-describedby="like"/> ケーキ</label><br /> <label for="checkitem10"><input type="checkbox" id="checkitem10" value="まんじゅう" aria-describedby="like"/> まんじゅう</label><br /> <label for="checkitem11"><input type="checkbox" id="checkitem11" value="ガム" aria-describedby="like"/> ガム</label><br /> <label for="checkitem12"><input type="checkbox" id="checkitem12" value="プリン" aria-describedby="like"/> プリン</label><br /> <label for="checkitem13"><input type="checkbox" id="checkitem13" value="シュークリーム" aria-describedby="like"/> シュークリーム</label><br /> <label for="checkitem14"><input type="checkbox" id="checkitem14" value="昆布" aria-describedby="like"/> 昆布</label><br /> <label for="checkitem15"><input type="checkbox" id="checkitem15" value="その他" aria-describedby="like"/> その他</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="同意する" /> 個人情報保護方針に同意する</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; /**/ }