[form] BS5 - Input Group (BS입력그룹 = BS인풋그룹)

1. Input Group 구문
2. Input Group 크기
3. 여러 Input / Helper
4. Checkbox/Radio 있는 Input Group
5. Input Group 버튼
6. Dropdown Button 있는 Input Group

Input Group 구문

 

.input-group 클래스

• (INPUT 필드 + INPUT 필드 설명 텍스트나 이미지)을 감싸는 요소에 추가

 

.input-group-text 클래스

• INPUT 필드 설명 텍스트나 이미지를 꾸미는 스타일
• INPUT 필드 앞이나 뒤에 추가 가능.

 

---

[예제]

 

<form action="/action_page.php">

    <div class="input-group mb-3">

      <span class="input-group-text">이름</span>

      <input type="text" class="form-control" placeholder="이름 입력" name="name">

    </div>

    <div class="input-group mb-3">      

      <input type="text" class="form-control" placeholder="Email 입력" name="email">

     <span class="input-group-text">(예)</span>

    </div>    

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

</form>

 

Input Group 크기

 

.input-group 클래스 옆에 아래 클래스 추가.

• .input-group-sm 클래스 : 작은 INPUT 그룹
• .input-group-lg 클래스 : 큰 INPUT 그룹

 

---

 

<div class="input-group mb-3 input-group-sm">

   <span class="input-group-text">Small INPUT</span>

  <input type="text" class="form-control">

</div>

<div class="input-group mb-3">

  <span class="input-group-text">기본 INPUT</span>

  <input type="text" class="form-control">>

</div>

<div class="input-group mb-3 input-group-lg">

  <span class="input-group-text">Large INPUT</span>

  <input type="text" class="form-control">

</div>

 

여러 Input / Helper

 

<!-- 여러 INPUT -->

<div class="input-group mb-3">

  <span class="input-group-text">사이트명</span>

  <input type="text" class="form-control" placeholder="한글 사이트명">

  <input type="text" class="form-control" placeholder="영문 사이트명">

</div>

<!-- 여러 Helper -->

<div class="input-group mb-3">

  <span class="input-group-text">HTML</span>

  <span class="input-group-text">CSS</span>

  <span class="input-group-text">JS</span>

  <input type="text" class="form-control">

</div>

 

Checkbox/Radio 있는 Input Group

※ Checkbox / Radio 버튼 역시 Text Helper 대신 사용 가능.

 

<!-- Checkbox Helper -->

<div class="input-group mb-3">

  <div class="input-group-text">

    <input type="checkbox">

  </div>

  <input type="text" class="form-control" placeholder="text 입력">

</div>

<!-- Radio Helper -->

<div class="input-group mb-3">

  <div class="input-group-text">

    <input type="radio">

  </div>

  <input type="text" class="form-control" placeholder="text 입력">

</div>

 

Input Group 버튼

※ .input-group 클래스 안에 BUTTON 추가 가능.

<!-- INPUT 앞에 BUTTON 추가 -->

<div class="input-group mb-3">

  <button class="btn btn-outline-primary" type="button">기본 Button</button>

  <input type="text" class="form-control" placeholder="Some text">

</div>

 

<!-- INPUT 뒤에 BUTTON 추가 -->

<div class="input-group mb-3">

  <input type="text" class="form-control" placeholder="검색어 입력">

  <button class="btn btn-success" type="submit">Go</button>

</div>

 

<-- INPUT 뒤에 BUTTON 2개 추가 -->

<div class="input-group mb-3">

  <input type="text" class="form-control" placeholder="텍스트 입력">

  <button class="btn btn-primary" type="button">확인</button>

  <button class="btn btn-danger" type="button">취소</button>

</div>

 

Dropdown Button 있는 Input Group

※ .input-group 안에 드롭다운 메뉴 추가 시, .dropdown 클래스로 감쌀 필요 없음.

 

<div class="input-group mt-3 mb-3">

  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">드롭다운 버튼</button>

  <ul class="dropdown-menu">

    <li><a class="dropdown-item" href="#">링크1</a></li>

    <li><a class="dropdown-item" href="#">링크2</a></li>

    <li><a class="dropdown-item" href="#">링크3</a></li>

  </ul>

  <input type="text" class="form-control" placeholder="name 입력">

</div>