[basic] BS3 - Form (BS폼양식) ★★★

 

Bootstrap's Default Settings (부트스트랩 기본 세팅)

.form-inline (768px 이상 너비에서 폼 가로 왼쪽 정렬 배열)

.form-horizontal (이름표와 폼 통제 그룹 수평 정렬 레이아웃)

.form-control (입력창, 테스트영역, 선택 요소 블럭화 및 반응화)

.form-control-feedback

.form-control-static

.form-group (폼 입력창과 리벨을 감싸는 컨테이너) = 하단 마진 (margin-bottom:15px)

.input-group (입력 그룹)

.input-group-lg (큰 입력 그룹)

.input-group-sm (작은 입력 그룹)

.input-group-addon (입력창에 아이콘이나 텍스트 추가)

.input-group-btn (입력창 옆에 버튼 추가)

.input-lg (큰 입력창, 큰 선택창)

.input-sm (작은 입력창, 작은 선택창)

 

BS3 기본 세팅

 

1.

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

<input>, <textarea>, <select>

 

2.

BS 폼 레이아웃 3가지

① Vertical form (수직폼) -기본값

② Horizontal form  (수평폼)

③ Inline form (인라인폼)

 

3.

3가지 레이아웃에 적용되는 공통 설정 2가지.

① 라벨이나 폼제어요소를 <div class="form-group"> 요소로 감싸기.

② <input>, <textarea>, <select> 요소에 .form-control 클래스 추가.

 

Vertical Form (수직폼) - 폼요소 세로 나열 (= 한줄전체차지)

 

<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="checkbox">

    <label><input type="checkbox"> 자동</label>

  </div>

  <button type="submit" class="btn btn-default">Submit</button>

</form>

 

---

 

[참고]

요소간 상하 간격을 위해 .form_group 가진 <div> 요소로 각 요소를 감쌈.

.form-group { margin-bottom: 1rem;}

 

Inline Form (인라인폼) - 모두 가로 나열

 

<form class="form-inline" 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="checkbox">

    <label><input type="checkbox"> 자동</label>

  </div>

  <button type="submit" class="btn btn-default">Submit</button>

</form>

 

---

 

팁 : 

모든 입력에 label 포함 않으면 화면 판독기에서 Form에 문제 발생 가능.

.sr-only 클래스 사용해 스크린 리더 제외한 모든 장치의 레이블 숨기기.

 

<form class="form-inline" action="/action_page.php">

  <div class="form-group">

    <label class="sr-only" for="email">Email address:</label>

    <input type="email" class="form-control" id="email">

  </div>

  <div class="form-group">

    <label class="sr-only" for="pwd">Password:</label>

    <input type="password" class="form-control" id="pwd">

  </div>

  <div class="checkbox">

    <label><input type="checkbox"> 자동</label>

  </div>

  <button type="submit" class="btn btn-default">Submit</button>

</form>

 

---

 

인라인폼 매뉴얼

 

1.

인라인폼 경우, 모든 요소는 왼쪽 정렬되고 가로로 나란히 배치됨.

 

2.

너비 768 픽셀 이상인 Viewport 내의 Form에서만 적용.

 

3.

인라임폼 경우, <form> 요소에 .form-inline 클래스 추가 필요.

 

Horizontal Form (수평폼) - 폼요소 가로 나열

 

<form class="form-horizontal" action="/action_page.php">

  <div class="form-group">

    <label class="control-label col-sm-2" for="email">Email:</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="email" placeholder="Enter email">

    </div>

  </div>

  <div class="form-group">

    <label class="control-label col-sm-2" for="pwd">Password:</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="pwd" placeholder="Enter password">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label><input type="checkbox"> 자동</label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">Submit</button>

    </div>

  </div>

</form>

 

---

 

[수평폼 매뉴얼]

 

1.

수평폼은 대형 및 중형 기기 화면에서 레이블이 입력요소와 나란히 배치됨.

소형기기 (767px 이하)에서는 세로 정렬. (레이블은 각 입력요소 위에 배치).

 

2.

수평폼 경우, 아래 2가지 규칙 추가 필요.

<form> 요소에 .form-horizontal 클래스 추가.

모든 <label> 요소에 .control-label 클래스 추가.

 

3.

BS그리드 클래스 사용해 레이블 및 양식 컨트롤 그룹을 가로 레이아웃으로 정렬.