<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //郵便番号を全角から半角に置換 document.frm1.zip1.onblur = function(){ document.frm1.zip1.value = toHankakuNum(document.frm1.zip1.value); } document.frm1.zip2.onblur = function(){ document.frm1.zip2.value = toHankakuNum(document.frm1.zip2.value); } document.frm1.onsubmit = function(){ //性別チェック var genderNull = true; for(var i = 0; i < document.frm1.gender.length; i++){ if(document.frm1.gender[i].checked == true){ genderNull = false; exit; } } if(document.frm1.name.value == ""){ alert("お名前が未入力です") } else if(document.frm1.inquiry.value == ""){ alert("お問い合わせ内容が未入力です") } else if(genderNull == true){ alert("性別を選択してください"); } //メールアドレスが入力されていて、メールアドレスのチェック else if(!document.frm1.mail.value.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/) && document.frm1.mail.value != ""){ alert("メールアドレスが正しくありません"); } //メールアドレスが入力されていて、メールアドレスと確認メールアドレスが異なっているとき else if((document.frm1.mail.value != document.frm1.mail_check.value) && document.frm1.mail.value != ""){ alert("メールアドレスが異なっています。"); } else{ //送信確認 if(window.confirm("送信しますか")){ alert("送信しました"); document.frm1.submit(); } else{ alert("送信しませんでした"); } } return false; } } function toHankakuNum(motoText){ han = "0123456789.,-+"; zen = "0123456789.,-+"; str = ""; for (i=0; i<motoText.length; i++) { c = motoText.charAt(i); n = zen.indexOf(c,0); if (n >= 0) c = han.charAt(n); str += c; } return str; } </script> <style type="text/css"> #container{ width:600px; margin:0 auto; padding:20px; background:white; } h1{ margin-top:20px; font-size:large; color:#7CADB6; } dl dt { border-left:5px solid #7CADB6; border-bottom:1px solid #7CADB6; font-size:small; margin:0; padding:5px; } dl dt span{ color:red; font-weight:bold; } dl dd{ font-size:small; margin:0; padding:10px; } dl dd p.error{ margin:0; color:red; font-weight:bold; margin-bottom:1em; } dl dd.error input, dl dd.error textarea, dl dd.error label{ background:#FFCCCC; } /*ラベルの背景にも色を付ける処理*/ dl dd input{ position:relative; z-index:2; } dl dd label{ position:relative; padding:5px 5px 5px 25px; margin : 0 5px 0 -25px; margin-left:-25px; position:relative; z-index:1; } </style> </head> <body> <div id="container"> <h1>当サイトへのお問い合わせ</h1> <form name="frm1" id="frm1" action="http://www.yahoo.co.jp" method="POST"> <dl> <dt>お名前<span>※</span></dt> <dd><input type="text" name="name" id="name" size="80" class="validate required"></dd> <dt>フリガナ</dt> <dd><input type="text" name="furi" id="furi" size="80"></dd> <dt>郵便番号</dt> <dd><input type="text" name="zip1" id="zip1" size="4" maxlength="4" class="validate number"> - <input type="text" name="zip2" size="3" maxlength="3" class="validate number"></dd> <dt>メールアドレス</dt> <dd><input type="text" value="" size="80" name="mail" id="mail" class="validate mail"></dd> <dt>メールアドレス(確認)</dt> <dd><input type="text" value="" size="80" name="mail_check" id="mail_check" class="validate mail mail_check"></dd> <dt>性別<span>※</span></dt> <dd> <input type="radio" value="男性" name="gender" id="man" class="validate required"> <label for="man">男性</label> <input type="radio" value="女性" name="gender" id="woman"><label for="woman">女性</label> </dd> <dt>どこでこのサイトを知りましたか?<span>※</span></dt> <dd class="checkboxRequired"> <input type="checkbox" name="search" id="search" value="検索エンジン"> <label for="search">検索エンジン</label> <input type="checkbox" name="freiend" id="freiend" value="知人の紹介"> <label for="freiend">知人の紹介</label> <input type="checkbox" name="mail_magazine" id="mail_magazine" value="メルマガ"> <label for="mail_magazine">メルマガ</label> <input type="checkbox" name="etc" value="その他" id="etc" class="validate add_text"> <label for="etc">その他</label> <input type="text" name="etc_text" value=""> </dd> <dt>お問い合わせ内容<span>※</span></dt> <dd> <textarea id="inquiry" name="inquiry" rows="10" cols="60" class="validate required"></textarea> </dd> </dl> <p><input type="submit" value="送信"></p> </form> </div> </body> </html>