• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

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

 

BS4 기본세팅 상태 

 

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

 

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>

 


 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS4 - HOME (BS소개)
basic BS4 - Start (BS시작) - BS4다운 / BS4CDN / BS4구문
basic BS4 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS4 - Grid (BS그리드)
basic BS4 - Text/Typography (BS글자 = BS텍스트)
basic BS4 - Color (BS색깔 = BS색상) - BS글자색 + BS배경색
basic BS4 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS4 - Image (BS이미지) - 이미지모양 + 이미지정렬 + 반응형이미지
basic BS4 - Jumbotron (BS점보트론) - 박스형 vs 와이드형
basic BS4 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS4 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS4 - Button Group (BS버튼그룹)
basic BS4 - Badge (BS배지)
basic BS4 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS4 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS4 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS4 - List Group (BS리스트그룹)
basic BS4 - Card (BS카드) - Well (BS웰) + Panel (BS패널) + Thumbnail (B…
basic BS4 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS4 - Collapse (BS접기 = BS컬랩스 = BS토글)
basic BS4 - Nav (네브) - 간단메뉴 + 일반탭 + 알약탭
basic BS4 - Navbar (메뉴바) - 네비게이션 메뉴바 (= 네브바 = 네비바) ※ BS4분기점
basic BS4 - Form (BS폼양식)
basic BS4 - Input (BS입력 = BS인풋)
basic BS4 - Input Group (BS입력그룹 = BS인풋그룹)
basic BS4 - Custom Form (BS커스텀폼)
basic BS4 - Carousel (BS캐러셀)
basic BS4 - Modal (BS모달)
basic BS4 - Tooltip (BS툴팁 = BS말풍선 허버형)
basic BS4 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS4 - Toast (BS토스트) - 순간말풍선 (= 팝업상자 = 짧은경고창 = 스낵바)
basic BS4 - Scrollspy (BS스크롤스파이) - 원페이지메뉴링크 (= 내부링크)
basic BS4 - Utilities (BS유틸클래스 + BS4추가클래스) ★★★★★
basic BS4 - Flex (BS플렉스박스) ★★★★★
basic BS4 - Icon (BS아이콘)
basic BS4 - Media Object (BS미디어객체) - 썸네일형, 요약형
basic BS4 - Filter (필터링) ★ - 테이블필터링 + 리스트필터링 + 드롭다운필터링 + div안 텍스트필…
grid BS4 - Grid (BS그리드) - 반응형 레이아웃 ★★★
grid BS4 - Grid Stacked-to-horizontal (BS그리드 수직정렬 → 수평정렬)
grid BS4 - Grid Extra Small (BS그리드 초소형기기) - .col-숫자, .col 클래스
grid BS4 - Grid Small (BS그리드 소형기기) - .col-sm-숫자, .col-sm 클래스
grid BS4 - Grid Medium (BS그리드 중형기기) - .col-md-숫자, .col-md 클래스
grid BS4 - Grid Large (BS그리드 대형기기) - .col-lg-숫자, .col-lg 클래스
grid BS4 - Grid Extra Large (BS그리드 초대형기기) - .col-xl-숫자, .col-xl 클…
grid BS4 - Grid Example (BS그리드 예제) ★
theme BS4 - Template (BS템플릿)
BS_bookmark BS4 - BS메가메뉴
BS_bookmark BS4 - Masonry (메이슨리) 갤러리
목록
찾아주셔서 감사합니다. Since 2012