- 사용 기술 : Java, MyBatis, JSP, Oracle, Bootstrap, CSS, HTML
- 오늘의 기술 : Bootstrap
- 사용 툴 : Eclipse
안녕하세요 하모예입니다.
오늘은 form validation을 통해서 특정 입력란을 작성하지 않으면 로그인이 되지 않도록 만들어보겠습니다.
먼저 지난 포스팅까지의 코드는 아래와 같습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시작화면</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">HAMOYE</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#login">
로그인
</a>
<!-- The Modal -->
<div class="modal" id="login">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">로그인</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body...
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">회원가입</a>
</li>
</ul>
</div>
</nav>
</body>
</html>총 세번의 포스팅으로 JSP File을 만들고, navbar를 만든다음,
로그인 메뉴를 클릭하면 모달창이 열리게 까지 만들었습니다.
오늘도 갓! w3schools를 참조하겠습니다.
www.w3schools.com/bootstrap4/bootstrap_forms.asp
Bootstrap 4 Forms
Bootstrap 4 Forms Bootstrap 4's Default Settings Form controls automatically receive some global styling with Bootstrap: All textual , , and elements with class .form-control have a width of 100%. Bootstrap 4 Form Layouts Bootstrap provides two types of fo
www.w3schools.com
form태그는 자체적으로 굉장한 기능을 가지고 있습니다.
action 속성을 통해서 form태그의 정보를 받을 mapping값을 지정해줄수도 있으며,
method를 통해서 post로 보낼지, get으로 보낼지도 정할 수 있죠.
여기에 bootstrap에서 제공하는 .was-validated 클래스를 첨가하면 복잡해보이는 기능을 손쉽게 구현할 수 있습니다.
부트스트랩에는 .valid-feedback과 .invalid-feedback 이라는 클래스가 있습니다.
말 그대로 유효한경우 보여지는 피드백, 유효하지 않을 경우 보여지는 피드백인데,
이 두 친구를 실질적으로 돌아가게 만들기 위해서는 form태그가 was-validated 혹은 needs-validation이여야 합니다.
was-validated와 needs-validation은 아래와 같은 차이가 있습니다.
- was-validated : 클라이언트가 submit하게 전에 입력란 작성 여부를 체크
- needs-validation : 클라이언트가 submit한 후에 입력란 작성 여부를 체크
개인적으로 버튼을 누르기 전에 시각적으로 작성여부를 보여주는게 더 좋기 때문에 was-validated를 활용하겠습니다.
먼저 modal-body <div>태그에서 "Modal body..."라는 글을 지워줍니다.
<!-- Modal body -->
<div class="modal-body">
Modal body...
</div>그리고 그 자리에 was-validated를 클래스 속성으로 가지는 form태그를 만들어줍니다.
<form action="" class="was-validated">
<div class="form-group">
<label for="userId">아이디 </label>
<input type="text" class="form-control" id="userId" placeholder="Enter ID" name="userId" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="userPw">비밀번호 </label>
<input type="password" class="form-control" id="userPw" placeholder="Enter Password" name="userPw" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<button type="submit" class="btn btn-primary" style="margin-left:50%;">로그인</button>
<button type="button" class="btn btn-secondary">회원가입</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">취소</button>
</form><form>태그 안은 크게 form-group <div>와 <button>으로 구성됩니다.
<div class="form-group">안에 <label>의 for속성은 <input>의 아이디와 동일해야하며,
기능은 "아이디"로 적힌 부분을 클릭했을때 자동으로 매핑된 <input>에 focusing이 되는 것입니다.
클라이언트가 was-validated 속성을 가진 <form>안에 <input>을 입력하지 않으면
빨간색으로 invalid-feedback, 입력하면 초록색으로 valid-feedback에 작성된 문구가 뜨게 됩니다.
따라서 form태그를 바르게 작성했다면 tomcat 작동시 아래와 같은 화면이 나와야 합니다.
입력란을 작성하지 않고 로그인 버튼을 누르면 해당 입력란 아래에 "이 입력란을 작성하세요"라는 경고문이 뜹니다.
마치 부트스트랩에서 시각적으로 보이는 초록, 빨간 글씨 외에도 기능적인 면을 구현한 것처럼 보일 수 있지만,
분명히 구분해야할 점은 이런 경고문이 뜨는 건 두 <input>태그 안에 'required'를 추가했기 때문입니다.
부트스트랩은 정말 좋은 프레임워크이지만 저는 새로운 언어에 쉽게 매료되는 금사빠 개발자기 때문에
부트를 지나치게 신뢰하게 되면 사용자의 관점에 빠져 알맹이 없는 화면을 구현하게 될 수도 있다는 생각을 항상 하고, 부트스트랩의 편리함에 도취되지 않으려 노력합니다.
이런저런 언어, 프레임워크, 툴, API 등을 다룰때마다 드는 생각이, 개발은 컴퓨터 앞에서 1:1로 이루어지지만
정말 다양한 외형, 성격을 가진 사람들과 친해지는 과정과 같다는 것입니다.
Spring은 Java의 친절한 사촌같고, Maven은 Spring이랑 친하게 지내고 정리를 잘하지만 가끔씩 덤벙거려서 중요한 걸 어디에 뒀는지 까먹는 친구같고, Bootstrap은 CSS의 천재적인 막내아들 같은 느낌이랄까요.
실없는 소리를 했네요. 더 길게 헛소리하기 전에 오늘의 포스팅을 마치겠습니다.
다음 포스팅에서는 회원가입 페이지를 만들도록 하겠습니다.
끝까지 읽어주셔서 감사합니다.
'개발 > 세상에서 두번째로 쉬운 로그인' 카테고리의 다른 글
| 1-2.로그인 모달(modal)창 만들기 (1) | 2020.11.01 |
|---|---|
| 1-1. JSP 파일 생성하고, collapse navbar 만들기 (0) | 2020.10.31 |
댓글