<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
<script src="../js/join.js"></script>
<style type="text/css">
.wrap{
width:700px;
margin: auto;
}
.wrap > h1{
text-align: center;
}
table{
width: 700px;
}
table, tr, td{
border: 1px solid gray;
border-collapse: collapse;
padding: 5px;
}
textarea{
resize: none;
}
select{
width: 150px;
}
.title{
text-align: center;
background: #000;
color: #fff;
}
.a{
color:red;
font-size: 0.8em;
font-weight: bold;
}
.b{
color:blue;
font-size: 0.8em;
font-weight: bold;
}
.ex{
font-size: 0.9em;
}
input[type="text"], input[type="password"]{
width:150px;
}
.text{
font-size: 1em;
font-weight: bold;
}
</style>
<script type="text/javascript">
var goJoin = function(){
alert(1)
}
</script>
</head>
<body>
<div class="wrap">
<h1>회원가입</h1>
<form action="#" name="myForm" onsubmit="return goJoin();">
<table>
<tr>
<td colspan="2" class="title">회원 기본 정보 </td>
</tr>
<tr>
<td>
<label class="text">아이디</label>
</td>
<td>
<input type="text" id="id" required="required" onkeyup="idCheck(this.form)"/>
<label class="a" id="id-label">필수 항목입니다.</label>
</td>
</tr>
<tr>
<td>
<label class="text">비밀번호</label>
</td>
<td>
<input type="password" id="pw1" onkeyup="pwCheck1(this.form)" maxlength="16"/>
<label class="a" id="pw-label1">필수 항목입니다.</label>
</td>
</tr>
<tr>
<td>
<label class="text">비밀번호 확인</label>
</td>
<td>
<input type="password" id="pw2" onkeyup="pwCheck2(this.form)" maxlength="16"/>
<label class="a" id="pw-label2">한번 더 입력하세요.</label>
</td>
</tr>
<tr>
<td>
<label class="text">이메일</label>
</td>
<td>
<input type="text"/>@
<input type="email" list="domain" placeholder="직접입력">
<datalist id="domain">
<option value="naver.com">naver.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="gmail.com">gmail.com</option>
</datalist>
</td>
</tr>
<tr>
<td>
<label class="text">이름</label>
</td>
<td>
<input type="text"/>
</td>
</tr>
<tr>
<td colspan="2" class="title">개인정보</td>
</tr>
<tr>
<td>
<label class="text">주민등록번호</label>
</td>
<td>
<input type="text" id="sn1" style="width: 90px;" maxlength="6" onkeyup="moveFocus1(this.form)"/> -
<input type="password" id="sn2" style="width: 90px;" maxlength="7"/>
<label class="ex">예)123456-1234567</label>
<input type="button" value="검증" onclick="snCheck(this.form);"/>
</td>
</tr>
<tr>
<td>
<label class="text">생일</label>
</td>
<td>
<input type="text" id="year" style="width: 80px; background-color: #999" readonly/> 년
<input type="text" id="month" style="width: 80px; background-color: #999" readonly/> 월
<input type="text" id="day" style="width: 80px; background-color: #999" readonly/> 일
</td>
</tr>
<tr>
<td>
<label class="text">성별</label>
</td>
<td>
<input type="radio" name="gender" value="male">남
<input type="radio" name="gender" value="female">여
</td>
</tr>
<tr>
<td>
<label class="text">관심분야</label>
</td>
<td>
<input type="checkbox" name="checkbox" value="1">여행
<input type="checkbox" name="checkbox" value="2">영화
<input type="checkbox" name="checkbox" value="3">독서
<input type="checkbox" name="checkbox" value="4">음악
<input type="checkbox" name="checkbox" value="5">관심없음
</td>
</tr>
<tr>
<td>
<label class="text">자기소개</label>
</td>
<td>
<textarea cols="40" rows="8"></textarea>
</td>
</tr>
</table>
<br/>
<input type="submit" value="회원가입">
<input type="reset" value="다시입력">
</form>
</div>
</body>
</html>
