실습
회원가입 폼 만들기
민아!
2024. 4. 12. 11:26
HTML
<!DOCTYPE html>
<html>
<head>
<title>회원가입 폼</title>
<link rel="stylesheet" href="styles.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=" />
</head>
<body>
<div class="form-wrap">
<form id="join" action="#">
<div class="form-box">
<div class="form-title">아이디</div>
<div class="form-cont">
<input type="text" name="name" placeholder="이름" />
</div>
</div>
<div class="form-box">
<div class="form-title">주민번호</div>
<div class="form-cont">
<input type="text" name="ssn_front" placeholder="주민번호 앞자리" />
-
<input
type="password"
name="ssn_back"
placeholder="주민번호 앞자리"
/>
</div>
</div>
<div class="form-box">
<div class="form-title">이름</div>
<div class="form-cont">
<input type="text" name="username" placeholder="아이디" />
</div>
</div>
<div class="form-box">
<div class="form-title">비밀번호</div>
<div class="form-cont">
<input type="password" name="password" placeholder="비밀번호" />
</div>
</div>
<div class="form-box">
<div class="form-title">비밀번호 확인</div>
<div class="form-cont">
<input
type="password"
name="passwordRetype"
placeholder="비밀번호"
/>
</div>
</div>
<div class="form-box">
<div class="form-title">이메일</div>
<div class="form-cont">
<input type="text" name="emailId" placeholder="이메일" /> @
<select name="mailbox">
<option value="daum.net">daum.net</option>
<option value="naver.com">naver.com</option>
<option value="google.com">google.com</option>
</select>
</div>
</div>
<div class="form-box">
<div class="form-title">주소</div>
<div class="form-cont">
<input type="text" name="add" placeholder="주소" />
</div>
</div>
<div class="form-box">
<div class="form-title">성별</div>
<div class="form-cont">
<input type="radio" name="gender" value="female" />여성
<input type="radio" name="gender" value="male" />남성
</div>
</div>
<div class="form-box agree-box">
<div class="form-title">개인정보 동의</div>
<div class="form-cont">
<input type="checkbox" name="agree" />동의합니다.
</div>
</div>
<div class="btn-wrap">
<button type="submit" value="가입" class="btn">가입</button>
<button type="reset" value="리셋" class="btn">리셋</button>
</div>
</form>
</div>
<!-- 여기에 HTML문서를 작성하세요. -->
<script src="script.js"></script>
</body>
</html>
CSS
/* CSS를 자유롭게 작성하세요. */
.form-wrap {
display: flex;
width: 500px;
background: #eee;
border: 1px solid #333;
border-radius: 30px;
padding: 30px;
}
.form-box {
display: flex;
padding: 10px;
}
.form-box .form-title {
width: 100px;
}
.form-box .form-cont select,
.form-box .form-cont input[type='text'],
.form-box .form-cont input[type='password'] {
height: 30px;
padding: 0 10px;
box-sizing: border-box;
}
.btn-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.btn {
font-size: 16px;
padding: 10px;
}
.btn + .btn {
margin-left: 10px;
}
JS
// 1. table 대신 flexbox를 사용하여 요소들을 정렬해야 합니다.
// 2. 입력받아야 하는 정보와 사용할 요소는 아래와 같습니다.
// - 이름: `input:text`
// - 주민번호: `input:text` - `input:password`
// - 아이디: `input:text`
// - 비밀번호: `input:password`
// - 비밀번호 확인: `input:password`
// - 이메일: `input:text` + `select`
// - 주소: `input:text`
// - 성별: `input:radio`
// - 개인정보 동의: `input:checkbox`
// 3. 모든 항목은 필수 입력 항목이어야 합니다.
// 4. 비밀번호와 비밀번호 확인이 일치하지 않는 경우, 알림창으로 유저에게 알려야 합니다.
// 5. 아이디는 4글자 이상, 8글자 이하로 입력해야 합니다. 그렇지 않을 경우 알림창으로 유저에게 알려야 합니다.
// 6. submit 이벤트가 발생했을 때 새로고침이 일어나지 않아야 합니다.
// 7. 회원가입 버튼을 클릭했을 때 콘솔창에 입력한 모든 정보가 출력되어야 합니다.
// form 요소를 선택
const form = document.querySelector('form');
// 입력한 정보를 객체로 만들어 반환하는 함수를 제공합니다.
// HINT. 이 함수를 이벤트리스너 내부에서 호출하세요.
function getUserInfo(
name,
ssn_front,
ssn_back,
username,
password,
emailId,
mailbox,
address,
gender,
agree
) {
const userInfo = {
name: name,
ssn: ssn_front + '-' + ssn_back,
username: username,
password: password,
email: emailId + '@' + mailbox,
address: address,
gender: gender,
agree: agree,
};
return userInfo;
}
// 폼 제출 이벤트 리스너
form.addEventListener('submit', function (event) {
// 여기에 코드를 작성하세요.
// HINT. 사용해야할 모든 요소를 DOM 메서드로 변수에 할당합니다.
// 아이디(username)의 길이에 따라 알림창을 보여줍니다.(4글자 이상 8글자 이하))
// 비밀번호(password), 비밀번호 확인(passwordRetype) 일치 여부에 따라 알림창을 보여줍니다.
// 그렇지 않은 경우 입력한 정보를 객체로 만들어 콘솔에 출력합니다.
event.preventDefault();
let userid = event.target.name.value;
let userSsn =
event.target.ssn_front.value + '-' + event.target.ssn_back.value;
let username = event.target.username.value;
let password = event.target.password.value;
let passwordRetype = event.target.passwordRetype.value;
let email = event.target.emailId.value + '@' + event.target.mailbox.value;
let gender = event.target.gender.value;
let agree = event.target.agree.value;
// 아이디 글자수 제한
if (userid.length < 5 || userid.length > 7) {
alert('아이디는 4글자 이상 6글자 이하로 입력해주세요.');
}
// 비밀번호 일치 확인
if (password !== passwordRetype) {
alert('비밀번호가 일치하지 않습니다.');
}
console.log(
userid,
userSsn,
username,
password,
passwordRetype,
email,
gender,
agree
);
});
퍼블 할때도 항상 form태그를 헷갈려 했는데, 이번에야말로 제대로 이해한 것 같다 (;;)
name과 value의 사용법을 중요하게 생각하자!