[JSP] 5강 - 부트스트랩을 이용해 회원가입 화면 만들기

본 포스팅은

정보 제공용이 아닌

유튜브 동빈나님의 JSP 게시판 만들기 강좌 5강을

바탕으로 보고 배운 것을 직접 정리해본 포스트 입니다.

 

---

 

** 2강에서 만든 로그인 화면을 수정해 간단하게 회원가입 화면을 만드는 시간이었다.

간단한 작업이었지만 인상적이었던 건 input type에 email이 있다는 걸 알았을 때인데 그동안 회원가입하면서 이메일 양식을 지키라고 나오게 하는 것은 어떻게 구현한 건가? 했는데 생각 외로 간단하게 HTML 자체 기능이었다는 것을 알았다.

 

---

** Join.jsp

<!-- 컨테이너 -->
<div class="container">
	<div class="col-lg-4">
		<!-- 점보트론 -->
		<div class="jumbotron" style="padding-top:20px;">
			<!-- form의 데이터 전송 방식과 어디로 전송할지 -->
			<form method="post" action="joinAction.jsp">
				<h3 style="text-align: center;">회원가입 화면</h3>
				<div class="form-group">
					<input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20">
				</div>
				<div class="form-group">
					<input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20">
				</div>
				<div  class="form-group">
					<input type="text" class="form-control" placeholder="이름" name="userName" maxlength="20">
				</div>
				<div  class="form-group" style="text-align: center;">
					<div class="btn-group" data-toggle="buttons">
						<label class="btn btn-primary active">
							<input type="radio" name="userName" autocomplete="off" value="남자" checked> 남자
						</label>
						<label class="btn btn-primary">
							<input type="radio" name="userName" autocomplete="off" value="여자">여자
						</label>
					</div>
				</div>
				<div  class="form-group">
					<input type="email" class="form-control" placeholder="이메일" name="userEmail" maxlength="20">
				</div>
				<input type="submit" class="btn btn-primary form-control" value="회원가입">
			</form>
		</div>
	</div>
</div>

 

• 아이디와 비밀번호, 이름, 성별, 이메일 항목을 만들어주고 submit 버튼을 통해 form방식으로 보낼 jsp의 이름을 수정하였다.
• input type에 email도 있다는 걸 처음 알았다. 이는 email형식이 아니면 넘어가지 못하도록 하는 기능이 있다.
• <input type ="" autocomplete="on/off">는 처음 보는 속성이었는데 찾아보니 자동완성 기능의 사용 여부라고 한다.
• on으로 해두면 브라우저가 이전에 입력했던 값들이 드롭다운으로 보여진다.
• autocomplete가 사용할 수 있는 type은 color, datepickers, email, password, range, search, tel, text 정도이다.

 

 

 

 

---

 

 

 

** 결과 화면

 

 

♣ 참고 및 인용

• tcpschool.com/html-tag-attrs/input-autocomplete