Bootstrap 4 biểu mẫu

❮ Trước Kế tiếp ❯

Cài đặt mặc định của Bootstrap 4

Các điều khiển biểu mẫu tự động nhận một số kiểu chung với Bootstrap:

Tất cả các phần tử dạng text <input>và <textarea>có <select>class .form-controlđều có độ rộng là 100%.

Bố cục biểu mẫu Bootstrap 4

Bootstrap cung cấp hai loại bố cục biểu mẫu:

Biểu mẫu xếp chồng (toàn chiều rộng)
Mẫu nội tuyến

Bootstrap 4 Stacked Form

E-mail:

Mật khẩu:

Nhớ tôi

Ví dụ sau tạo một biểu mẫu xếp chồng lên nhau với hai trường đầu vào, một hộp kiểm và một nút gửi.

Thêm một phần tử trình bao bọc .form-group, xung quanh mỗi điều khiển biểu mẫu, để đảm bảo lề thích hợp:

Thí dụ

<form action="/action_page.php">
<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Bootstrap Inline Form

Ở dạng nội dòng, tất cả các phần tử đều nằm trong dòng và căn trái.

Lưu ý: Điều này chỉ áp dụng cho các biểu mẫu trong cửa sổ xem có chiều rộng ít nhất là 576px. Trên màn hình nhỏ hơn 576px, nó sẽ xếp chồng theo chiều ngang.

Quy tắc bổ sung cho biểu mẫu nội tuyến:

Thêm lớp .form-inlinevào <form>phần tử

Ví dụ sau tạo một biểu mẫu nội tuyến với hai trường nhập, một hộp kiểm và một nút gửi:

Thí dụ

<form class="form-inline" action="/action_page.php">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" placeholder="Enter email" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" placeholder="Enter password" id="pwd">
<div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Biểu mẫu nội tuyến với các tiện ích

Biểu mẫu nội tuyến ở trên có cảm giác được "nén", và sẽ trông đẹp hơn nhiều với các tiện ích giãn cách của Bootstrap. Ví dụ sau thêm một lề phải ( .mr-sm-2) cho mỗi đầu vào trên tất cả các thiết bị (nhỏ trở lên). Và một lớp dưới cùng của lề ( .mb-2) được sử dụng để tạo kiểu cho trường đầu vào khi nó bị ngắt (chuyển từ ngang sang dọc do không đủ khoảng trống / chiều rộng):

Thí dụ

<form class="form-inline" action="/action_page.php">
  <label for="email" class="mr-sm-2">Email address:</label>
  <input type="email" class="form-control mb-2 mr-sm-2" placeholder="Enter email" id="email">
  <label for="pwd" class="mr-sm-2">Password:</label>
  <input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Bạn sẽ tìm hiểu thêm về khoảng cách và các lớp "trợ giúp" khác trong Chương Tiện ích Bootstrap 4 của chúng tôi .

Hàng / Lưới biểu mẫu

Bạn cũng có thể sử dụng các cột ( .col) để kiểm soát chiều rộng và căn chỉnh của đầu vào biểu mẫu mà không cần sử dụng các tiện ích giãn cách. Chỉ cần nhớ đặt chúng bên trong một .rowhộp đựng.

Trong ví dụ dưới đây, chúng tôi sử dụng hai cột sẽ xuất hiện cạnh nhau. Bạn sẽ tìm hiểu thêm về các cột và hàng trong Chương Bootstrap Grids .

Thí dụ

Nếu bạn muốn ít lề lưới hơn (ghi đè các rãnh cột mặc định), hãy sử dụng .form-rowthay vì .row:

Thí dụ

Xác thực biểu mẫu

Bạn có thể sử dụng các lớp xác thực khác nhau để cung cấp phản hồi có giá trị cho người dùng. Thêm một trong hai .was-validatedhoặc .needs-validationvào <form>phần tử, tùy thuộc vào việc bạn muốn cung cấp phản hồi xác thực trước hay sau khi gửi biểu mẫu. Các trường đầu vào sẽ có đường viền màu xanh lá cây (hợp lệ) hoặc màu đỏ (không hợp lệ) để cho biết những gì còn thiếu trong biểu mẫu. Bạn cũng có thể thêm một .valid-feedbackhoặc một .invalid-feedbacktin nhắn để cho người dùng biết rõ ràng những gì còn thiếu hoặc cần phải hoàn thành trước khi gửi biểu mẫu.

Thí dụ

Trong ví dụ này, chúng tôi sử dụng .was-validatedđể chỉ ra những gì còn thiếu trước khi gửi biểu mẫu:

<form action="/action_page.php" class="was-validated">
<div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</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">Please fill out this field.</div>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Check this checkbox to continue.</div>
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Thí dụ

Trong ví dụ này, chúng tôi sử dụng .needs-validation, sẽ thêm hiệu ứng xác thực SAU KHI gửi biểu mẫu (nếu thiếu bất kỳ điều gì). Lưu ý rằng bạn cũng sẽ phải thêm một số mã jQuery để ví dụ này hoạt động bình thường:

<form action="/action_page.php" class="needs-validation" novalidate>
<div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</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">Please fill out this field.</div>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Check this checkbox to continue.</div>
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
    // Get the forms we want to add validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    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>

❮ Trước Kế tiếp ❯

Hướng dẫn Bootstrap 4

Bootstrap 4 Grid

Bootstrap 4 Khác

Bootstrap 4 Ref

Bootstrap 4 biểu mẫu

Cài đặt mặc định của Bootstrap 4

Bố cục biểu mẫu Bootstrap 4

Bootstrap 4 Stacked Form

Thí dụ

Bootstrap Inline Form

Thí dụ

Biểu mẫu nội tuyến với các tiện ích

Thí dụ

Hàng / Lưới biểu mẫu

Thí dụ

Thí dụ

Xác thực biểu mẫu

Thí dụ

Thí dụ