목차
BS4 기본세팅 상태 블럭방식 - 세로 나열 (= 한줄전체차지) 인라인방식 - 가로 나열 유효성 검사 종류 제출 전 유효성 검사 제출 후 유효성 검사
BS4 기본세팅 상태
1. .form-control
2. 폼요소 나열 종류
블럭방식 - 세로로 나열
인라인방식 - 가로로 나열
블럭방식 - 세로 나열 (= 한줄전체차지)
<form action="/action_page.php">
<div class="form-group " >
<label for="email">Email:</label>
<input type="email"class="form-control" id="email">
</div>
<div class="form-group " >
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group form-check" >
<label class="form-check-label" >
<input class="form-check-input" type="checkbox"> auto
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
[코드 설명]
요소간 상하 간격 주려면, .form_group 클래스 가진 <div>로 감쌈.
※ .form-group { margin-bottom: 1rem;}
인라인방식 - 가로 나열
<form class="form-inline" action="/action_page.php">
<label for="email" class="mr-sm-2" >Email:</label>
<input type="email" class="form-control mb-2 mr-sm-2" id="email">
<label for="pwd" class="mr-sm-2" >Password:</label>
<input type="password" class="form-control mb-2 mr-sm-2" id="pwd">
<div class="form-check mb-2 mr-sm-2" >
<label class="form-check-label" >
<input class="form-check-input" type="checkbox"> auto
</label>
</div>
<button type="submit" class="btn btn-primary mb-2" >Submit</button>
</form>
[코드 설명]
1.
<form> 태그에 .form_inline 클래스 추가.
2.
576px 이상 경우, 가로 나열.
576px 미만 경우, 세로 나열.
3.
요소 아래 간격
.mb-2, .my-2 {
margin-bottom: .5rem!important;
}
4.
요소 오른쪽 간격
@media (min-width: 576px) {
.mr-sm-2, .mx-sm-2 {
margin-right: .5rem!important;
}
}
유효성 검사 종류
1.
제출 전 유효성검사 :.was-validated 클래스 추가.
제출 후 유효성검사 :
<form> 태그에 .needs-validation 클래스 추가. 제이쿼리 필요.
2.
양식 제출 전에 누락되었거나 해야할 사항을 사용자에게 알리기 위해 아래 클래스 추가..valid-feedback 클래스 : 제대로 입력한 상태.
.invalid-feedback 클래스 : 입력 누락되었거나 잘못 입력한 상태.
제출 전 유효성 검사
<form action="/action_page.php" class="was-validated" >
<div class="form-group">
<label for="email">Username:</label>
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email" required>
<div class="valid-feedback" >Valid.</div>
<div class="invalid-feedback" >email 입력하세요.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback" >Valid.</div>
<div class="invalid-feedback" >password 입력하세요.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> 동의
<div class="valid-feedback" >Valid.</div>
<div class="invalid-feedback" >동의에 체크하세요.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
제출 후 유효성 검사
<form action="/action_page.php" class="needs-validation" novalidate>
<div class="form-group">
<label for="email">email:</label>
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email" required>
<div class="valid-feedback" >Valid.</div>
<div class="invalid-feedback" >email 입력하세요.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback" >Valid.</div>
<div class="invalid-feedback" >password 입력하세요.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> 동의
<div class="valid-feedback" >Valid.</div>
<div class="invalid-feedback" >동의에 체크하세요.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
// 입력필드가 빈 게 있는 경우, 전송 차단.
(function() {
'use strict';
window.addEventListener('load', function() {
// 유효성 체크할 폼요소 얻기
var forms = document.getElementsByClassName('needs-validation');
// 폼요소 점검 후 유효하지 않은 경우 전송 차단
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
