[basic] BS4 - Form (BS폼양식)

1. BS4 기본세팅 상태
2. 블럭방식 - 세로 나열 (= 한줄전체차지)
3. 인라인방식 - 가로 나열
4. 유효성 검사 종류
5. 제출 전 유효성 검사
6. 제출 후 유효성 검사

BS4 기본세팅 상태 

 

1. .form-control 클래스 가진 아래 텍스트 입력요소는 가로 너비 100% 차지.

• <input>, <textarea>, <select>

 

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.

제출 전 유효성검사 :
<form> 태그에 .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>