프로젝트
Mini Project : Mini Project. 회원가입폼만들기 (Javascript :2일차 과제)
Chansman
2025. 4. 1. 10:42
회원가입 양식 만들기: HTML, CSS, JavaScript 튜토리얼
안녕하세요! 이번 글에서는 회원가입 양식을 HTML, CSS, JavaScript를 이용하여 만드는 방법을 단계별로 설명합니다. 우리는 join.html이라는 문서를 만들어 회원가입 양식을 구현하고, 자바스크립트를 통해 입력값을 검증하고 가입 성공 후 환영 메시지를 표시하는 기능까지 구현할 것입니다.
이 튜토리얼은 웹 개발의 기초를 다지기에 좋은 실습입니다. HTML로 폼 구조를 만들고, CSS로 스타일을 적용한 뒤, JavaScript로 기능을 추가하는 방법을 차례대로 배워봅시다.
1. 📝 프로젝트 개요
1-1. HTML 기본 구조
첫 번째 단계는 기본 HTML 파일을 만드는 것입니다. 회원가입 폼의 구조를 잡고, 이를 join.html 파일로 작성합니다. 이 HTML 파일은 기본적인 폼 요소들을 포함하며, 사용자로부터 필요한 정보를 입력받을 수 있는 양식을 만듭니다.
1-2. 파일 구조
- join.html: 회원가입 폼을 작성하는 HTML 파일입니다.
- join.css: 폼 스타일링을 위한 CSS 파일입니다.
- join.js: 폼 기능을 구현하는 JavaScript 파일입니다.
이렇게 세 가지 파일을 만들어 프로젝트의 기본 구성을 마칩니다.
2. 📝 회원가입 폼의 기본 레이아웃 설정
먼저, HTML 문서에서 기본적인 구조를 만들고, 그 안에 입력 양식을 배치할 테이블을 추가합니다.
2-1. 컨테이너 태그
<div id="container">
<form id="form" action="#">
<table class="table">
<!-- 입력 요소들 -->
</table>
<div class="buttons">
<input type="submit" value="가입하기" class="btn">
<input type="reset" value="리셋" class="btn">
</div>
</form>
</div>- **컨테이너(div#container)**는 모든 폼 콘텐츠를 감싸는 역할을 합니다.
- form 태그 안에는 테이블을 사용하여 입력 양식을 배치합니다. 각 행(tr)에는 아이디, 비밀번호, 이메일 등을 입력받는 필드를 배치합니다.
- 가입하기와 리셋 버튼을 추가하여, 사용자가 데이터를 제출하거나 초기화할 수 있도록 합니다.
3. 📝 입력 요소 구성
이제 테이블 내부에 입력 요소를 하나씩 추가합니다. 각 입력 요소는 input 태그를 사용하며, 각 항목마다 name 속성을 부여하여 자바스크립트에서 이를 처리할 수 있도록 합니다.
3-1. 아이디 입력
<tr>
<th>아이디</th>
<td><input type="text" name="id" placeholder="아이디"></td>
</tr>- 아이디는 기본적인 텍스트 입력 필드입니다. name="id"는 자바스크립트에서 값을 식별하기 위한 중요한 역할을 합니다.
3-2. 비밀번호 입력
<tr>
<th>비밀번호</th>
<td><input type="password" name="pw1" placeholder="비밀번호"></td>
</tr>- 비밀번호는 패스워드 타입으로 설정하여 입력값이 노출되지 않도록 합니다.
3-3. 비밀번호 확인
<tr>
<th>비밀번호 확인</th>
<td><input type="password" name="pw2" placeholder="비밀번호 확인"></td>
</tr>- 비밀번호 확인은 두 번째 비밀번호 필드입니다. 첫 번째 비밀번호와 일치 여부를 확인하기 위해 필요합니다.
4. 📝 추가 필드 구성
아이디와 비밀번호 외에도, 이름, 전화번호, 직무 등 여러 항목을 추가하여 더 완전한 회원가입 폼을 만듭니다.
4-1. 이름 입력
<tr>
<th>이름</th>
<td><input type="text" name="name" placeholder="이름"></td>
</tr>4-2. 전화번호 입력
<tr>
<th>전화번호</th>
<td><input type="text" name="phone" placeholder="전화번호"></td>
</tr>4-3. 직무 선택 (셀렉트 박스)
<tr>
<th>원하는 직무</th>
<td>
<select name="position">
<option value="developer">개발자</option>
<option value="designer">디자이너</option>
<option value="planner">기획자</option>
</select>
</td>
</tr>- 셀렉트 요소를 사용하여 직무를 선택할 수 있게 설정합니다.
4-4. 성별 선택 (라디오 버튼)
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="male" checked> 남자
<input type="radio" name="gender" value="female"> 여자
</td>
</tr>4-5. 이메일 입력
<tr>
<th>이메일</th>
<td><input type="email" name="email" placeholder="이메일"></td>
</tr>4-6. 자기소개 입력
<tr>
<th>자기소개</th>
<td><textarea name="intro" placeholder="자기소개"></textarea></td>
</tr>5. 📋 자바스크립트로 폼 처리 및 유효성 검사
회원가입 폼의 기본 구조가 완성되었으면, 이제 자바스크립트로 폼을 처리하고 유효성 검사 기능을 추가합니다.
5-1. 이벤트 리스너 설정
폼 제출 시 새로고침을 방지하고, 입력값을 처리하는 코드를 작성합니다.
const form = document.getElementById('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(form);
// 추가 검증 로직
});5-2. 유효성 검사 로직
아이디의 길이가 너무 짧거나 비밀번호가 일치하지 않으면 경고를 띄우고, 문제 해결 후 가입을 진행합니다.
const userId = formData.get('id');
if (userId.length < 6) {
alert("아이디가 너무 짧습니다. 6자 이상 입력해 주세요.");
return;
}
const password1 = formData.get('pw1');
const password2 = formData.get('pw2');
if (password1 !== password2) {
alert("비밀번호가 일치하지 않습니다.");
return;
}5-3. 가입 성공 처리
모든 검증을 통과하면 가입 성공 후 환영 메시지를 화면에 표시합니다.
document.body.innerHTML = `<p>${userId}님 환영합니다!</p>`;6. 🖥️ HTML, CSS 팁
6-1. 자동완성 끄기
입력 필드에서 자동완성을 끄려면 autocomplete="off" 속성을 사용합니다.
<input type="text" name="id" autocomplete="off">6-2. 필수 입력 요소 설정
required 속성을 사용하면 필수 입력 항목을 설정할 수 있습니다.
<input type="text" name="name" required>7. 🧑💻 최종 마무리
CSS는 스타일링을 위해 제공되며, 필요한 경우 참조하여 사용합니다. 이 스타일은 테이블을 정돈하고, 폼이 더 깔끔하게 보이도록 만듭니다.
8. 🎉 과제
과제로는 회원가입을 완료한 후, 가입한 내역을 6줄로 출력하는 기능을 구현해야 합니다. 출력되는 내용에는 아이디, 이름, 전화번호, 직무 등의 정보가 포함되어야 합니다.
최종 코드: 회원가입 폼
1. HTML 코드 (join.html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" contect="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 회원가입 양식</title>
<link href="join.css" rel="stylesheet">
</head>
<body>
<div id="container">
<form id="form" action="#">
<table class="table">
<tr>
<th>아이디</th>
<td>
<input name="id" placeholder="아이디" autocomplete="off" required>
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" name="pw1" placeholder="비밀번호" required>
</td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td>
<input type="password" name="pw2" placeholder="비밀번호확인" required>
</td>
</tr>
<tr>
<th>이름</th>
<td>
<input name="name" placeholder="이름" autocomplete="off" required>
</td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input name="phone" placeholder="전화번호" autocomplete="off">
</td>
</tr>
<tr>
<th>원하는 직무</th>
<td>
<select name="position">
<option value="developer">개발자</option>
<option value="designer">웹디자이너</option>
<option value="manager">기획자</option>
<option value="undetermined" selected>미정</option>
</select>
</td>
</tr>
<tr>
<th>성별</th>
<td>
<label>
<input type="radio" name="gender" value="male" checked> 남자
</label>
<label>
<input type="radio" name="gender" value="female"> 여자
</label>
</td>
</tr>
<tr>
<th>이메일</th>
<td>
<input title="정확한 메일 주소를 작성해주세요." type="email" name="email" placeholder="이메일">
</td>
</tr>
<tr>
<th>자기소개</th>
<td>
<textarea name="intro" placeholder="자기소개"></textarea>
</td>
</tr>
</table>
<div class="buttons">
<input type="submit" value="가입" class="btn" title="가입">
<input type="reset" value="리셋" class="btn" title="처음으로">
</div>
</form>
</div>
<script src="join.js"></script>
</body>
</html>2. JavaScript 코드 (join.js)
// 제출 이벤트를 받는다 (이벤트 핸들링)
const form = document.getElementById('form')
form.addEventListener('submit', function(event){
event.preventDefault()
// 추가 검증 로직
let userId = event.target.id.value
let userPw1 = event.target.pw1.value
let userPw2 = event.target.pw2.value
let userName = event.target.name.value
let userPhone = event.target.phone.value
let userPosition = event.target.position.value
let userGender = event.target.gender.value
let userEmail = event.target.email.value
let userIntro = event.target.intro.value
if (userId.length < 6) {
alert("아이디가 너무 짧습니다. 6자 이상 입력해 주세요.")
return
}
if (userPw1 !== userPw2) {
alert("비밀번호가 일치하지 않습니다.")
return
}
document.body.innerHTML =
`<p>${userId}님 환영합니다!</p>` +
`<p>회원 가입 시 입력하신 내역은 다음과 같습니다.</p>` +
`<p>아이디 : ${userId}</p>` +
`<p>이름 : ${userName}</p>` +
`<p>전화번호 : ${userPhone}</p>` +
`<p>원하는 직무 : ${userPosition}</p>`
})3. CSS 코드 (join.css)
#container {
width: 60%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
}
table {
width: 100%;
margin-bottom: 20px;
}
th, td {
padding: 10px;
text-align: left;
}
th {
width: 150px;
}
input[type="text"], input[type="password"], input[type="email"], textarea, select {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
textarea {
height: 100px;
}
.buttons {
text-align: center;
}
button, .btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover, .btn:hover {
background-color: #45a049;
}코드 설명
- HTML 코드:
- 회원가입 폼을 테이블 형태로 구성하였습니다. 각 입력 항목에 대한 input 요소와 textarea, select 등을 사용하여 필요한 정보를 입력받습니다.
- 가입하기 버튼과 리셋 버튼을 배치하여 사용자가 폼을 제출하거나 초기화할 수 있습니다.
- JavaScript 코드:
- 폼 제출 이벤트를 처리하여 페이지 새로 고침을 방지하고, 폼 데이터를 읽어옵니다.
- 유효성 검사: 아이디 길이가 6자 이상인지, 비밀번호가 일치하는지 확인합니다.
- 모든 검증을 통과하면 가입 완료 후, 화면에 환영 메시지와 입력된 정보를 표시합니다.
- CSS 코드:
- 폼의 스타일링을 담당하며, 폼을 보기 좋게 배치하고 버튼에 호버 효과를 추가하여 사용자 경험을 개선합니다.