Các hình thức

Tổng quan

Các điều khiển biểu mẫu của Bootstrap mở rộng trên các kiểu biểu mẫu Khởi động lại của chúng tôi với các lớp. Sử dụng các lớp này để chọn tham gia các màn hình tùy chỉnh của chúng để hiển thị nhất quán hơn trên các trình duyệt và thiết bị.

Đảm bảo sử dụng một typethuộc tính thích hợp trên tất cả các đầu vào (ví dụ: emailcho địa chỉ email hoặc numbercho thông tin số) để tận dụng các điều khiển đầu vào mới hơn như xác minh email, chọn số và hơn thế nữa.

Đây là một ví dụ nhanh để chứng minh các kiểu biểu mẫu của Bootstrap. Hãy tiếp tục đọc tài liệu về các lớp bắt buộc, bố cục biểu mẫu và hơn thế nữa.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Văn bản biểu mẫu

Văn bản biểu mẫu cấp khối hoặc cấp nội tuyến có thể được tạo bằng cách sử dụng .form-text.

Văn bản biểu mẫu bên dưới đầu vào có thể được tạo kiểu với .form-text. Nếu một phần tử cấp khối sẽ được sử dụng, thì một lề trên sẽ được thêm vào để tạo khoảng cách giữa các đầu vào ở trên một cách dễ dàng.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

Văn bản nội tuyến có thể sử dụng bất kỳ phần tử HTML nội dòng điển hình nào (có thể là a <span>, <small>hoặc thứ gì đó khác) mà không có gì khác ngoài .form-textlớp.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

Biểu mẫu bị vô hiệu hóa

Thêm disabledthuộc tính boolean vào một đầu vào để ngăn các tương tác của người dùng và làm cho nó trông nhẹ hơn.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Thêm disabledthuộc tính vào a <fieldset>để tắt tất cả các điều khiển bên trong. Trình duyệt coi tất cả các điều khiển biểu mẫu gốc ( <input>và <select>các <button>phần tử) bên trong <fieldset disabled>là bị vô hiệu hóa, ngăn cản cả tương tác bàn phím và chuột trên chúng.

Tuy nhiên, nếu biểu mẫu của bạn cũng bao gồm các phần tử giống như nút tùy chỉnh, chẳng hạn như <a class="btn btn-*">...</a>, các phần tử này sẽ chỉ được cung cấp một kiểu pointer-events: none, có nghĩa là chúng vẫn có thể lấy tiêu điểm và có thể hoạt động bằng bàn phím. Trong trường hợp này, bạn phải sửa đổi thủ công các điều khiển này bằng cách thêm tabindex="-1"để ngăn chúng nhận tiêu điểm và aria-disabled="disabled"báo hiệu trạng thái của chúng cho các công nghệ hỗ trợ.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

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 .visually-hiddenlớ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 thuộc tính 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à .visually-hiddennộ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

Sass

Nhiều biến biểu mẫu được đặt ở mức chung để được sử dụng lại và mở rộng bởi các thành phần biểu mẫu riêng lẻ. Bạn sẽ thấy các biến này thường xuyên nhất là $btn-input-*và $input-*.

Biến

$btn-input-*biến là các biến toàn cục được chia sẻ giữa các nút và các thành phần biểu mẫu của chúng tôi. Bạn sẽ thấy những biến này thường được gán lại dưới dạng giá trị cho các biến thành phần cụ thể khác.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;