[BootStrap] 로그인 폼 만들기 / 부트스트랩 examples 사용해보기

티스토리 뷰

WEB/Bootstrap

[BootStrap] 로그인 폼 만들기 / 부트스트랩 examples 사용해보기

Happyoon ~ 2021. 11. 29. 02:24

728x90

로그인 폼을 만들어보자.

loginform,jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/loginform.jsp</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
<script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">	
	<h2>로그인폼</h2>
	<form action="login.jsp" method="post">
		<div class="mb-3">
			<label class="form-label" for="id">아이디</label> 
			<input class="form-control" type="text" name="id" id="id" />
		</div>
		<div class="mb-3">
			<label class="form-label" for="pwd">비밀번호</label> 
			<input class="form-control" type="password" name="pwd" id="pwd" />
		</div>
		<button class="btn btn-outline-primary btn-sm" type="submit">로그인</button>
	</form>
</div>
</body>
</html>

결과

부트스트랩을 활용해보자.

1. 아래 사이트에서 download examples 를 해주고 zip을 풀어준다.

https://getbootstrap.com/docs/5.1/examples/

Examples

Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.

getbootstrap.com

2. sign-in폴더에 들어간다.

3. signin 파일을 jsp가 있는 위치에 복붙해준다.

4. index 를 더블클릭하고, 페이지 소스 보기를 통해 필요한 내용을 loginform2에 붙여넣는다.

5. 사진이 필요하면 다음의 경로를 통해 사진을 images에 넣어준다.

loginform2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/loginform2.jsp</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
<style>
   
   html,
   body {
     height: 100%;
   }
   
   body {
     display: flex;
     align-items: center;
     padding-top: 40px;
     padding-bottom: 40px;
     background-color: #f5f5f5;
   }
   
   .form-signin {
     width: 100%;
     max-width: 330px;
     padding: 15px;
     margin: auto;
   }
   
   .form-signin .checkbox {
     font-weight: 400;
   }
   
   .form-signin .form-floating:focus-within {
     z-index: 2;
   }
   
   .form-signin input[type="email"] {
     margin-bottom: -1px;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
   
   .form-signin input[type="password"] {
     margin-bottom: 10px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }

</style>
<script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
</head>
<body class="text-center">
   <main class="form-signin">
      <form action="login.jsp" method="post">
         <img class="mb-4" src="${pageContext.request.contextPath}/images/bootstrap-logo.svg" alt="" width="72" height="57">
         <h1 class="h3 mb-3 fw-normal">로그인 페이지</h1>
         
         <div class="form-floating">
            <input type="text" class="form-control" id="id" placeholder="아이디 입력...">
            <label for="id">아이디</label>
         </div>
         <div class="form-floating">
            <input type="password" class="form-control" id="pwd" placeholder="Password">
            <label for="pwd">비밀번호</label>
         </div>
         
         <div class="checkbox mb-3">
            <label>
               <input type="checkbox" value="remember-me"> 아이디 저장
            </label>
         </div>
         <button class="w-100 btn btn-lg btn-primary" type="submit">로그인</button>
         <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
      </form>
   </main>
</body>
</html>

결과

'WEB > Bootstrap' 카테고리의 다른 글

[WEB] 부트스트랩을 이용하여 폼 유효성 검사하기 / is-valid (0)	2021.11.29
[WEB] BootStrap 으로 쉽고 빠르게 디자인하기 (0)	2021.11.17

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

yoon's Devlog

티스토리 뷰