<!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;
A: for(var i = 0; i < document.frm1.gender.length; i++){
if(document.frm1.gender[i].checked == true){
genderNull = false;
break A;
}
}
//どこのサイトか選択されているかチェック
var whereNull = true;
B: for(var i = 0; i < document.frm1.where.length; i++){
if(document.frm1.where[i].checked == true){
whereNull = false;
break B;
}
}
if(document.frm1.name.value == ""){
alert("お名前が未入力です")
}
else if(document.frm1.inquiry.value == ""){
alert("お問い合わせ内容が未入力です")
}
else if(genderNull == true){
alert("性別を選択してください");
}
else if(whereNull == 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(document.getElementById("etc").checked == true && document.getElementById("etc_text").value == ""){
alert("その他の内容をお書きください")
}
else{
//送信確認
if(window.confirm("送信しますか")){
alert("送信しました");
document.frm1.submit();
}
else{
alert("送信しませんでした");
}
}
return false;
}
}
function toHankakuNum(motoText){
han = "0123456789.,-+";
zen = "０１２３４５６７８９．，－＋";
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="where" id="search" value="search"> <label for="search">検索エンジン</label>
<input type="checkbox" name="where" id="freiend" value="freiend"> <label for="freiend">知人の紹介</label>
<input type="checkbox" name="where" id="mail_magazine" value="mail_magazine"> <label for="mail_magazine">メルマガ</label>
<input type="checkbox" name="where" value="etc" id="etc" class="validate add_text"> <label for="etc">その他</label>
<input type="text" name="etc_text" id="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>