soozya
[FRONT] 회원가입 페이지 본문
[👩🏻💻소스코드]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/Zspace/js/asj.js?ver=1"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="/Zspace/css/bootstrap.min.css" rel="stylesheet">
<link href="/Zspace/css/asj.css" rel="stylesheet">
<link href="/Zspace/css/tool.css" rel="stylesheet">
<title>::회원가입::</title>
<script>
$(function(){
$('#email_sel').change(function(){
$("#email_sel option:selected").each(function(){
if($(this).val()=='1'){
$('#email2').val('');
$('#email2').attr("disabled",false); //#email2 활성화
}else{
$('#email2').val($(this).text()); //선택값 입력
$('#email2').attr("disabled",true); //#email2 비활성화
}
})
})
})
</script>
<style>
table td{
padding-left:10px
}
textarea{
resize:none;
}
</style>
</head>
<body>
<jsp:include page="../sideBar.jsp" />
<div id="contents"> <!-- 사이드 제외 전체구역 -->
<div class="main">
<div class="top">
<img src="/Zspace/icon/mem_join.png" id="mem_join_img" width="50px">
<font size="4" id="mem_join"><b>회원가입</b></font>
<hr>
</div> <!-- top -->
<div class="middle">
<form id="joinform" name="joinform" action="/Zspace/mem_join.do" method="post" >
<table id="mem_join_tb" align="center" border="2px solid gray">
<tr>
<td width="120px">이름</td>
<td><input type="text" name="mem_name"></td>
</tr>
<tr>
<td width="120px">아이디</td>
<td><input type="text" name="mem_id">
<button id="idbtn">중복확인</button>
</td>
</tr>
<tr>
<td width="120px">비밀번호</td>
<td><input type="password" name="mem_pwd"></td>
</tr>
<tr>
<td style="padding-left:10px" width="120px">비밀번호 확인</td>
<td><span class="pwu_pop" title="※ 비밀번호 입력 조건
- 영소문자 / 숫자 / 특수기호 3가지 포함 8자~16자
- 입력가능 특수문자 [ ~, !, @, #, $, ^, -, _ ]
- 공백 입력 불가능">
<input type="password" name="mem_pwd2"></span></td>
</tr>
<tr id="addr">
<td width="120px">주소</td>
<td valign="middle"><input type="text" name="mem_zipcode">
<button id="zipbtn">우편번호 검색</button><p><p>
<input type="text" name="mem_addr1">
<input type="text" name="mem_addr2" width="70px" placeholder="추가 주소를 입력하세요">
</td>
</tr>
<tr>
<td width="120px">핸드폰 번호</td>
<td><input type="text" name="mem_phone"></td>
</tr>
<tr>
<td width="120px">이메일</td>
<td>
<input type="text" name="mem_email" size="13"> @
<input type="text" name="mem_email2" id="email2" size="13">
<select name="mem_email_sel" id="email_sel">
<option value="" selected>선택하세요</option>
<option value="1">직접 입력</option>
<option value="daum.net">daum.net</option>
<option value="google.com">google.com</option>
<option value="naver.com">naver.com</option>
<option value="nate.com">nate.com</option>
<option value="empas.com">empas.com</option>
</select>
</td>
</tr>
<p>
</table>
</form>
<p>
<hr>
<!-- 이용약관 -->
<div id="mem_agree" align="center">
<h2><b>회원 동의 약관</b></h2>
<textarea cols="120" rows="20" name="agree">
이용약관 부분 내용 생략
</textarea><p>
<input type="button" value="동의합니다." id="agree_btn" onclick="">
<input type="button" value="동의하지 않습니다." id="disagree_btn" onclick="history.back()">
</div> <!-- 이용약관 -->
</div><!-- middle -->
<hr>
<div id="btn">
<button id="join_end_btn" onclick="joinpop()">회원가입</button>
<a href="login.jsp"><button id="join_close_btn">닫기</button></a>
</div>
</div> <!-- main -->
</div><!-- contents -->
<jsp:include page="../footer.jsp" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/Zspace/js/bootstrap.min.js"></script>
</body>
</html>
[💬설명]
1️⃣ 회원가입 TABLE
◾ 비밀번호 input에 넣은 툴팁 기능! 캡쳐가 안돼서 굳이굳이 사진찍어 올리기 ㅋㅋ
2️⃣ 이메일 select
◾ 백엔드 구현하는 동안 팀원이 DB에 넣기 힘들다고 전체를 쓰도록 바꾸기 했지만 일단 프론트 구현할 땐 구역을 나눴음
👉🏻 @ 뒷부분이 #email2에 해당하며 id는 email_sel이고, 선택에 따라 함수를 적용할 수 있다.
- #email2에서 '직접 입력'이 value값 1에 해당하기 때문에 if 1을 선택할 경우
#email2의 값은 비어있고, 비활성화(disabled) false = 즉 활성화가 되면서 직접 입력 할 수 있게 된다.
- else 그 외의 선택값을 입력할 경우
#email2의 값은 선택한 값이 입력이 되고, 비활성화(disabled) true = 비활성화가 되면서 입력할 수 없게 변한다.
3️⃣ 회원가입 버튼 클릭 시 팝업 창 띄우기
◾ 회원가입 버튼을 누르면 onclick으로 joinpop()이라는 함수가 구현됨
⬇
◾ 회원가입 버튼을 클릭하면 'join.html'파일이 실행됨
⬇
[💻결과]
'👩🏻💻프로젝트 > 👥팀프로젝트' 카테고리의 다른 글
| [BACK] 게시판 글 쓰기, 상세보기 (0) | 2023.07.29 |
|---|---|
| [BACK] 게시판 글 목록 보기 (0) | 2023.07.20 |
| [FRONT] 관리자 페이지 (0) | 2023.04.28 |
| [FRONT] 회원정보 확인하기 (0) | 2023.04.26 |
| [FRONT] 로그인 화면 구현하기 (0) | 2023.04.16 |
'👩🏻💻프로젝트/👥팀프로젝트' Related Articles
more
