<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.addEventListener("load",function(){
var frm1 = document.getElementById("frm1");
//エラーフラグ
var errFlag = false;
//送信
frm1.addEventListener("submit",function(event){
//エラーのリセット
var errFlag = false;
var err = document.getElementsByClassName("error");
for(var i=0; i < err.length; i++){
err[i].removeChild(err[i].firstChild);
}
var requiredAry = document.getElementsByClassName("required");
for(var i = 0; i < requiredAry.length; i++){
//requiredクラスが空だったとき
if(requiredAry[i].value == ""){
errFlg = true;
var pObj = document.createElement("p");
pObj.setAttribute("class","error");
pObj.innerHTML = "必須項目です";
requiredAry[i].parentNode.appendChild(pObj);
}
}
if(errFlg != true){
//送信する
frm1.submit();
}
else{
//送信しない
event.preventDefault();
}
});
});
</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>