Tất cả các thẻ <input>
, <textarea>
, và <select>
với class .form-control
có chiều rộng 100%.
Bootstrap cung cấp hai loại form layouts:
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:
<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>
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:
.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:
<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 ở 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):
<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 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.
<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
:
<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>
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.
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>
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>
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website