Menu Bài Viết:

Bootstrap 4's Default Settings

Tất cả các thẻ <input>, <textarea>, và <select> với class .form-control có chiều rộng 100%.

Bootstrap 4 Form Layouts

Bootstrap cung cấp hai loại form layouts:

• Stacked (full-width) form (Xếp chồng nhau)
• Inline form (Xếp trên một hàng)

Bootstrap 4 Stacked Form

Email:

Password:

Remember me

Submit

Ví dụ sau đây tạo một stacked form với 2 trường input, 1 checkbox, và 1 submit button.

Add một phần tử bao bọc với class .form-group, quanh mỗi form control, để đảm bảo margins phù hợp:

Ví 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

Trong inline form, tất cả các phần tử là trên một dòng và được căn trái (left-aligned).

Lưu ý: Chỉ áp dụng cho forms với viewports (màn hình) rộng ít nhất 576px. Đối với viewports nhỏ hơn 576px, nó sẽ xếp chồng nhau.

Quy tắc bổ sung cho một inline form:

• Add class .form-inline cho thẻ <form>

Ví dụ sau đây tạo ra một inline form với 2 trường input, một checkbox, và một submit button:

Ví 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>

Inline Form với Utilities (tiện ích)

Inline Form ở trên có vẻ "khá tù" và nó sẽ trông tốt hơn nhiều cùng các tiện ích khoảng cách của Bootstrap.

Ví dụ sau đây thêm right margin (.mr-sm-2) cho mỗi input trên tất cả các thiết bị (từ small trở đi). Và class cho margin bottom(.mb-2) được dùng để style lại trường input khi nó breaks (Từ chiều ngang sang xuống dòng do màn hình không đủ không gian/chiều rộng):

Ví 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>

Form Row/Grid

Bạn có thể sử dụng các cột (.col) để kiểm soát và căn chỉnh chiều rộng cho form mà không sử dụng các tiện ích khoảng cách (spacing utilities). Bạn chỉ cần nhớ đặt chúng bên trong một class .row.

Trong ví dụ dưới đây, chúng tôi sử dụng hai cột xuất hiện cạnh nhau.

Ví dụ

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Enter password" name="pswd">
    </div>
  </div>
</form>

Nếu bạn muốn margins ít hơn, sử dụng .form-row thay vì .row:

Ví dụ

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Enter password" name="pswd">
    </div>
  </div>
</form>

Form Validation

Bạn có thể sử dụng các class validation khác nhau để cung cấp giá trị phản hồi cho người dùng. Add class .was-validated hoặc .needs-validation cho thẻ <form>, tùy thuộc vào việc bạn muốn cung cấp phản hồi validate trước hay sau khi gửi biểu mẫu. Các trường input sẽ có màu xanh(valid) hoặc đỏ (invalid) để chỉ ra những trường input còn thiếu hoặc đã ok. Bạn cũng có thể add class .valid-feedback hoặc .invalid-feedback để nói với người dùng một cách rõ ràng những gì còn thiếu, hoặc cần phải được thực hiện trước khi gửi biểu mẫu.

Ví dụ

Trong ví dụ này, chúng ta 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>

Ví dụ 2

Trong ví dụ này, chúng ta sử dụng .needs-validation, sẽ thêm hiệu ứng validate SAU khi biểu mẫu đã được gửi (nếu thiếu sót thứ gì). Lưu ý rằng bạn cũng sẽ phải thêm một số code jQuery cho ví dụ này để hoạt động tốt:

<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>