Trong bài học này chúng ta sẽ tìm hiểu về cách sử dụng biểu mẫu form trong Bootstrap 4 nhé các bạn. Chúng ta sẽ lần lượt tìm hiểu từ form mặc định cho đến cách dùng các lớp để định dạng cho form. Nào chúng ta cùng bắt đầu thôi.
Cài đặt mặc định của Bootstrap 4
Các Form tự động nhận một số kiểu chung với Bootstrap:
Tất cả các phần tử văn bản <input>, <textarea>, và <select> với lớp .form-control có độ rộng là 100%.
Bố cục Form Bootstrap 4
Bootstrap cung cấp hai loại bố cục Form
- Form xếp chồng (các phần tử xếp chồng lên nhau)
- Form nội tuyến (các phần tử nằm trên một hàng)
Bootstrap 4 Stacked Form
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 checkbox và một nút .
Xung quanh mỗi phần tử điều khiển form chúng ta thêm phần bao bọc với lớp .form-group để đảm bảo căn lề 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 (Form nội tuyến)
Ở dạng nội tuyến, tất cả các phần tử trong Form đề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-inline vào phần tử <form> để tạo form nội tuyến
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 tra và một nút.
<div class="container"> <h2>Form nội tuyến</h2> <form class="form-inline" action="/action_page.php"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email" name="email"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember">Ghi nhớ tôi </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div>
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 (đi từ ngang sang dọc do không đủ khoảng trống / chiều rộng):
<div class="container"> <h2>Form nội tuyến có căn chỉnh</h2> <form class="form-inline" action="/action_page.php"> <label for="email2" class="mb-2 mr-sm-2">Email:</label> <input type="text" class="form-control mb-2 mr-sm-2" id="email2" placeholder="Enter email" name="email"> <label for="pwd2" class="mb-2 mr-sm-2">Password:</label> <input type="text" class="form-control mb-2 mr-sm-2" id="pwd2" placeholder="Enter password" name="pswd"> <div class="form-check mb-2 mr-sm-2"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="remember"> Remember me </label> </div> <button type="submit" class="btn btn-primary mb-2">Submit</button> </form> </div>
Biểu mẫu dựa trên lưới
Bạn cũng có thể sử dụng cột (.col) để kiểm soát chiều rộng và căn chỉnh đầu vào của biểu mẫu mà không cần sử dụng tiện ích giãn cách. Chỉ cần nhớ đặt chúng bên trong một vùng chứa .row.
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 Hệ thống lưới Bootstrap 4
<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 ít lề hơn hãy sử dụng .form-row thay vì .row:
<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 (Xác thực biểu mẫu)
Xác thực biểu mẫu là quá trình giao tiếp của form với người dùng, qua đó phản hồi thông tin cho người dùng điền đầy đủ thộng tin. Bootstrap 4 cung cấp 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 .was-validated hoặc .needs-validation vào phần tử <form>, 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 nhập 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 thông báo .valid-feedback hoặc .invalid-feedback để 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.
Ví 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>
Ví dụ 2:
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>
Lời kết:
Vậy là chúng ta đã tìm hiểu xong về cách sử dụng Form trong Bootstrap 4 thông qua các ví dụ. Nếu có phần nào chưa hiểu rõ các bạn hãy comment ngay dưới bài viết này chúng mình sẽ giải đáp một cách sớm nhất nhé!
