in English

Nhóm đầu vào

Dễ dàng mở rộng điều khiển biểu mẫu bằng cách thêm văn bản, nút hoặc nhóm nút vào hai bên của đầu vào văn bản, lựa chọn tùy chỉnh và đầu vào tệp tùy chỉnh.

Ví dụ cơ bản

Đặt một tiện ích bổ sung hoặc nút ở hai bên của đầu vào. Bạn cũng có thể đặt một ở cả hai mặt của đầu vào. Hãy nhớ đặt <label>s bên ngoài nhóm đầu vào.

@
@ example.com
https://example.com/users/
$
.00
Với textarea 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
  </div>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

Gói

Theo mặc định, các nhóm đầu vào bao gồm thông qua flex-wrap: wrapđể phù hợp với việc xác thực trường biểu mẫu tùy chỉnh trong một nhóm đầu vào. Bạn có thể vô hiệu hóa điều này với .flex-nowrap.

@ 
<div class="input-group flex-nowrap">
  <div class="input-group-prepend">
    <span class="input-group-text" id="addon-wrapping">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>

Định cỡ

Thêm các lớp định kích thước biểu mẫu tương đối vào .input-groupchính nó và nội dung bên trong sẽ tự động thay đổi kích thước — không cần lặp lại các lớp kích thước điều khiển biểu mẫu trên mỗi phần tử.

Định kích thước trên các phần tử nhóm đầu vào riêng lẻ không được hỗ trợ.

Nhỏ bé
Mặc định
Lớn 
<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

Hộp kiểm và đài

Đặt bất kỳ hộp kiểm hoặc tùy chọn radio nào trong phần bổ trợ của nhóm đầu vào thay vì văn bản.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="Checkbox for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" aria-label="Radio button for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

Nhiều đầu vào

Mặc dù nhiều <input>s được hỗ trợ trực quan, nhưng kiểu xác thực chỉ có sẵn cho các nhóm đầu vào có một <input>.

Họ và tên 
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>

Nhiều addon

Nhiều tiện ích bổ sung được hỗ trợ và có thể được kết hợp với các phiên bản đầu vào hộp kiểm và radio.

$ 0,00
$ 0,00 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>

Nút bổ trợ

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend" id="button-addon3">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Các nút có trình đơn thả xuống

Hoạt động Một hành động khác Một cái gì đó khác ở đây Liên kết tách biệt
Hoạt động Một hành động khác Một cái gì đó khác ở đây Liên kết tách biệt 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Các nút được phân đoạn

Hoạt động Một hành động khác Một cái gì đó khác ở đây Liên kết tách biệt
Hoạt động Một hành động khác Một cái gì đó khác ở đây Liên kết tách biệt 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Biểu mẫu tùy chỉnh

Nhóm đầu vào bao gồm hỗ trợ cho các lựa chọn tùy chỉnh và đầu vào tệp tùy chỉnh. Các phiên bản mặc định của trình duyệt không được hỗ trợ.

Lựa chọn tùy chỉnh

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Đầu vào tệp tùy chỉnh

Ví dụ này sử dụng thành phần trình duyệt tệp tùy chỉnh , dựa trên plugin bs-custom-file-input riêng biệt.
Tải lên
Tải lên 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
  </div>
</div>

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
  </div>
</div>

Khả năng tiếp cận

Đảm bảo rằng tất cả các điều khiển biểu mẫu có tên có thể truy cập thích hợp để có thể chuyển tải mục đích của chúng đến người dùng công nghệ hỗ trợ. Cách đơn giản nhất để đạt được điều này là sử dụng một <label>phần tử, hoặc — trong trường hợp là các nút — để bao gồm văn bản mô tả đầy đủ như một phần của <button>...</button>nội dung.

Đối với các trường hợp không thể bao gồm <label>nội dung văn bản phù hợp hoặc hiển thị, có những cách thay thế để vẫn cung cấp một tên có thể truy cập được, chẳng hạn như:

  • <label>các phần tử ẩn bằng cách sử dụng .sr-onlylớp
  • Trỏ đến một phần tử hiện có có thể hoạt động như một nhãn bằng cách sử dụngaria-labelledby
  • Cung cấp một titlethuộc tính
  • Đặt tên có thể truy cập rõ ràng trên một phần tử bằng cách sử dụngaria-label

Nếu không có cái nào trong số này, thì các công nghệ hỗ trợ có thể sử dụng placeholderthuộc tính làm dự phòng cho tên có thể truy cập trên <input>và <textarea>các phần tử. Các ví dụ trong phần này cung cấp một số cách tiếp cận được đề xuất, theo từng trường hợp cụ thể.

Mặc dù việc sử dụng nội dung ẩn trực quan ( và thậm chí là .sr-onlynội dung biến mất sau khi trường biểu mẫu có nội dung) sẽ có lợi cho người dùng công nghệ hỗ trợ, nhưng việc thiếu văn bản nhãn có thể nhìn thấy vẫn có thể là vấn đề đối với một số người dùng nhất định. Một số hình thức nhãn có thể nhìn thấy thường là cách tiếp cận tốt nhất, cho cả khả năng tiếp cận và khả năng sử dụng.aria-labelplaceholder