Biểu mẫu khởi động
Cài đặt mặc định của Bootstrap
Điều khiển biểu mẫu tự động nhận được một số kiểu dáng chung với Bootstrap:
Tất cả các phần tử văn bản <input> , <textarea> và <select> có lớp .form-control có chiều rộng 100%.
Bố cục biểu mẫu Bootstrap
Bootstrap cung cấp ba loại bố cục biểu mẫu:
- Dạng dọc (đây là mặc định)
- Dạng ngang
- Biểu mẫu nội tuyến
Quy tắc tiêu chuẩn cho cả ba bố cục biểu mẫu:
- Gói nhãn và điều khiển biểu mẫu trong
<div class="form-group">(cần thiết để có khoảng cách tối ưu) - Thêm lớp
.form-controlvào tất cả các phần tử văn bản<input>,<textarea>và<select>
Biểu mẫu dọc Bootstrap (mặc định)
Ví dụ sau tạo một biểu mẫu dọc với hai trường nhập, một hộp kiểm và nút gửi:
Ví dụ
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> Hãy tự mình thử » Biểu mẫu nội tuyến Bootstrap
Ở dạng nội tuyến, tất cả các phần tử đều nằm trong dòng, căn trái và các nhãn nằm dọc theo.
Lưu ý: Điều này chỉ áp dụng cho các biểu mẫu trong khung nhìn rộng tối thiểu 768px!
Quy tắc bổ sung cho biểu mẫu nội tuyến:
- Thêm lớp
.form-inlinevào phần tử<form>
Ví dụ sau tạo 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:
Ví dụ
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> Hãy tự mình thử » Mẹo: Nếu bạn không bao gồm nhãn cho mỗi đầu vào, trình đọc màn hình sẽ gặp sự cố với biểu mẫu của bạn. Bạn có thể ẩn nhãn cho tất cả các thiết bị, ngoại trừ trình đọc màn hình, bằng cách sử dụng lớp .sr-only :
Ví dụ
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> Hãy tự mình thử »Biểu mẫu ngang Bootstrap
Dạng ngang có nghĩa là các nhãn được căn chỉnh cạnh trường đầu vào (ngang) trên màn hình lớn và vừa. Trên màn hình nhỏ (767px trở xuống), nó sẽ chuyển sang dạng dọc (nhãn được đặt phía trên mỗi đầu vào).
Quy tắc bổ sung cho dạng ngang:
- Thêm lớp
.form-horizontalvào phần tử<form> - Thêm lớp
.control-labelvào tất cả các phần tử<label>
Mẹo: Sử dụng các lớp lưới được xác định trước của Bootstrap để căn chỉnh nhãn và nhóm điều khiển biểu mẫu theo bố cục ngang.
Ví dụ sau tạo biểu mẫu nằm ngang với hai trường nhập, một hộp kiểm và một nút gửi.
Ví dụ
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form> Hãy tự mình thử »