매일 코딩공부/웹 개발

회원가입 페이지 만들기 - day1

dreamaccomplirar 2022. 11. 9. 21:48

오늘은 회원가입 페이지를 만들어 보려고 한다.

먼저 회원가입시 입력받을 내용을 정했다.

 

1. 아이디

2. 비밀번호 / 비밀번호 확인

3. 이름

4. 우편번호 및 주소

5. 연락처

 

마지막에는 가입완료 또는 취소 버튼을 추가하여

회원가입 작업이 완료 되거나, 취소를 눌렀을 경우

다시 처음 로그인 화면으로 돌아가는 것으로 구성해보았다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>회원가입</title>
	<style>
	.user{text-align: center;}
	</style>
</head>
<body>
<from method="post" action="login_page.html">
<div class="user">
	<h3>회원가입 페이지</h3>
	<p>ID: <input type="text" name="id"></p>
	<p>PW: <input type="password" name="pw"></p>
	<p>PW check: <input type="password" name="pw-check"></p>
	<p>이름: <input type="text" name="name"></p>
	<p>우편번호: <input type="text" name="post_code">&nbsp<button>우편번호찾기</button></p>
	<p>상세주소: <input type="text" name="address"></p>
	<p>전화번호: <input type="text" name="phone"></p>
	<p><input type="submit" name="완료">&nbsp&nbsp<input type="submit" name="취소"></p>
</div>
</body>
</html>

다른 사이트의 회원가입 페이지 처럼 구성하기 위해 조금 수정이 필요한 부분을 생각해보면

 

1. 아이디 중복검사

2. 비밀번호 일치확인

3. 우편번호 찾기 기능 추가 (현재는 버튼만 만들어 놓음)

4. 휴대폰 인증

5. 완료를 눌렀을때 입력한 데이터가 디비에 저장되는 것

6. 글자 정렬 수정

이런 기능들이 추가되어야한다.