HTML - 부트스트랩으로 회원가입 양식(Form) 화면 만들기
- 프로그래밍/HTML, CSS
- 2021. 5. 19.
이번에는 간단한 회원가입 양식(Form) 화면을 만들어 보려고 합니다. 단순히 HTML만 사용하지 않고, UI 라이브러리인 Bootstrap도 이용해서 조금 더 유려하고, 유효성 검사까지 포함한 회원가입 폼을 만들어보겠습니다.
시작하기
회원가입 화면은 프로젝트를 시작하면 필수적으로 개발하는 화면 중에 하나 입니다. 가장 기본적인 화면이지만 입력 값의 유효성 검사부터 데이터를 서버로 전송하는 일까지 처리하기 때문에 많은 기능을 요구하는 화면 입니다. 이 글에서는 HTML의 기초적인 부분을 다루며, 서버와 통신하는 부분까지는 이야기 하지 않습니다. 화면을 개발하는 도구로는 HTML, CSS 만을 사용하며, CSS의 경우 Boostrap의 스타일을 활용합니다.
Boostrap은 twitter에서 만든 UI 라이브러리로 배워두면 화면을 만들 때 생산성을 높여주는 좋은 라이브러리 입니다. 여기서는 Bootstrap의 사용 방법은 다루지 않습니다. 자세한 사용 방법은 Bootstrap 사이트에서 확인해주세요.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입 화면 샘플 - Bootstrap</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body {
min-height: 100vh;
background: -webkit-gradient(linear, left bottom, right top, from(#92b5db), to(#1d466c));
background: -webkit-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
background: -moz-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
background: -o-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
background: linear-gradient(to top right, #92b5db 0%, #1d466c 100%);
}
.input-form {
max-width: 680px;
margin-top: 80px;
padding: 32px;
background: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15)
}
</style>
</head>
<body>
<div class="container">
<div class="input-form-backgroud row">
<div class="input-form col-md-12 mx-auto">
<h4 class="mb-3">회원가입</h4>
<form class="validation-form" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="name">이름</label>
<input type="text" class="form-control" id="name" placeholder="" value="" required>
<div class="invalid-feedback">
이름을 입력해주세요.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="nickname">별명</label>
<input type="text" class="form-control" id="nickname" placeholder="" value="" required>
<div class="invalid-feedback">
별명을 입력해주세요.
</div>
</div>
</div>
<div class="mb-3">
<label for="email">이메일</label>
<input type="email" class="form-control" id="email" placeholder="you@example.com" required>
<div class="invalid-feedback">
이메일을 입력해주세요.
</div>
</div>
<div class="mb-3">
<label for="address">주소</label>
<input type="text" class="form-control" id="address" placeholder="서울특별시 강남구" required>
<div class="invalid-feedback">
주소를 입력해주세요.
</div>
</div>
<div class="mb-3">
<label for="address2">상세주소<span class="text-muted"> (필수 아님)</span></label>
<input type="text" class="form-control" id="address2" placeholder="상세주소를 입력해주세요.">
</div>
<div class="row">
<div class="col-md-8 mb-3">
<label for="root">가입 경로</label>
<select class="custom-select d-block w-100" id="root">
<option value=""></option>
<option>검색</option>
<option>카페</option>
</select>
<div class="invalid-feedback">
가입 경로를 선택해주세요.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="code">추천인 코드</label>
<input type="text" class="form-control" id="code" placeholder="" required>
<div class="invalid-feedback">
추천인 코드를 입력해주세요.
</div>
</div>
</div>
<hr class="mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="aggrement" required>
<label class="custom-control-label" for="aggrement">개인정보 수집 및 이용에 동의합니다.</label>
</div>
<div class="mb-4"></div>
<button class="btn btn-primary btn-lg btn-block" type="submit">가입 완료</button>
</form>
</div>
</div>
<footer class="my-3 text-center text-small">
<p class="mb-1">© 2021 YD</p>
</footer>
</div>
<script>
window.addEventListener('load', () => {
const forms = document.getElementsByClassName('validation-form');
Array.prototype.filter.call(forms, (form) => {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
</script>
</body>
</html>위에 작성한 내용은 Boostrap를 사용해 완성한 회원가입 양식 화면 코드 입니다. 전체를 설명하는 것은 어렵기 때문에 코드의 내용 중 설명이 필요하다고 생각되는 부분에 대해서만 다루도록 하겠습니다. 예제 코드는 파일로도 첨부해놓았습니다. 코드를 가져다 사용하기가 어려우신 분은 첨부파일 받아 쓰시면 됩니다.
부트스트랩 CDN 추가
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">부트스트랩은 사용하기 쉽게 CDN 형태로도 배포되고 있습니다. 부트스트랩을 온전하게 사용하려면 자바스크립트 파일로 포함해서 사용해야하지만, 이 예제에서는 부트스트랩의 스타일만 이용하기 때문에 style sheet만 가져와서 사용합니다.
양식(Form) 만들기
<div class="input-form col-md-12 mx-auto">
<h4 class="mb-3">회원가입</h4>
<form class="validation-form" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="name">이름</label>
<input type="text" class="form-control" id="name" placeholder="" value="" required>
<div class="invalid-feedback">
이름을 입력해주세요.
</div>
</div>
</div>
...
<button class="btn btn-primary btn-lg btn-block" type="submit">가입 완료</button>
</form>
</div>회원가입을 할 때 사용자에게 입력 값을 받는 부분을 작성한 코드입니다. 여기서 중요한 부분은 두가지가 있습니다.
1. <input>의 required 속성
: input에 required 속성을 선언함으로써 해당 input은 필수요소라고 명시한 점입니다. 사용자로부터 값을 입력받아 사용해야하는 경우 꼭 필요한 값과 그렇지 않은 값이 있습니다. 예를 들어 글을 작성한다고하면 제목과 내용은 필수지만, 태그는 입력을 하지 않아도 문제가 되지 않습니다. 이렇게 입력을 받는 값은 상황에 따라 필수 구분이 필요한데 이런 구분을 하는 방법이 바로 required 속성을 사용하는 것입니다.
2. <form>안에 있는 <button type="submit"/>
: <form>이 HTML에서 문맥적으로 가지는 의미는 양식(form)입니다. 이 양식(form)안에 submit 타입을 가지는 <button> 요소를 추가하면 <form>은 이 <button>이 클릭되면 자동으로 "제출"이라는 행동을 하게 됩니다. submit 타입 대신 button 타입을 사용하면 의미 그대로 button의 용도로 사용 할 수 있고, reset 타입을 사용하면 <form>이 가진 입력 값은 초기화 됩니다.
유효성 검사 기능 추가
window.addEventListener('load', () => {
const forms = document.getElementsByClassName('validation-form');
Array.prototype.filter.call(forms, (form) => {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);<form>에서 sumbit 액션이 일어난 경우 was-validated 클래스를 추가해 부트스트랩에서 제공하는 유효성 스타일을 적용 할 수 있도로 작성한 부분입니다. HTML의 <form>은 입력 필드 요소가 required 속성을 가지고 있으면 자동으로 유효성을 검사합니다. 이 부분은 부트스트랩의 유효성과 충돌나는 부분이 있기 때문에 <form>에 novalidate 속성을 설정하여, 자동으로 진행되는 유효성 검사를 진행하지 않게 하였습니다. <form>이 가진 유효성 검사와 부트스트랩의 유효성 검사는 동시에 사용 할 수 있습니다. 이 부분에 대한 구체적인 사용법과 예시는 부트스트랩 사이트 유효성 검사 페이지에서 확인해주세요.
Gradient를 사용한 배경
body {
min-height: 100vh;
background: -webkit-gradient(linear, left bottom, right top, from(#92b5db), to(#1d466c));
background: -webkit-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
background: -moz-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
background: -o-linear-gradient(bottom left, #92b5db 0%, #1d466c 100%);
background: linear-gradient(to top right, #92b5db 0%, #1d466c 100%);
}linear-gradient를 이용해서 밋밋해보이는 배경을 변경해보았습니다. 브라우저별 호환성을 지원하기 위해 vender prefix를 사용해 style을 정의하였습니다.
정리하기
이전에 프로젝트를 진행하면서 회원 가입 화면을 만들 때, 회원 가입 양식 예제 코드를 한번 만들어보면 좋을 것 같다는 생각이 들었습니다. 검색을 통해서 찾을 수 있는 괜찮은 자료들이 없기도하고, 한번 정리해보면 좋을 것 같다고 판단해서였습니다. 이 글에서는 유효성 검사를 포함한 회원가입 양식 화면을 만들어보았습니다.
이 글은 주제가 회원가입 양식 화면을 만드는 것이기 때문에 유효성 검사는 간단하게만 구현을 했습니다. 보여지는 디자인에 초점을 두고 코드를 작성해서 보기에 나쁘지 않을 뿐 자세하게 정의하고 사용해야하는 유효성은 짧은 내용으로만 구성되어있습니다.
'프로그래밍 > HTML, CSS' 카테고리의 다른 글
| CSS - 스타일시트란 무엇일까? (1) | 2021.06.30 |
|---|---|
| CSS - 모바일에서만 hover 스타일을 제거해보자 (0) | 2021.06.29 |
| CSS - 이미지 스프라이트(Sprite)의 정의와 사용하는 2가지 방법 (6) | 2021.05.25 |
| CSS - :where()와 :is()를 사용해보자 [Selectors Level 4] (12) | 2021.05.10 |
| CSS - 깜빡이는 효과 [Blink Effect] (23) | 2021.05.07 |