Biểu mẫu Bootstrap 5
Biểu mẫu xếp chồng
Tất cả các phần tử văn bản <input> và <textarea> có lớp .form-control
đều có kiểu dáng biểu mẫu phù hợp:
Ví dụ
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email:</label>
<input type="email"
class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd"
class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter
password" name="pswd">
</div>
<div class="form-check
mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
Hãy tự mình thử » Cũng lưu ý rằng chúng tôi thêm lớp .form-label
cho mỗi thành phần nhãn để đảm bảo phần đệm chính xác.
Các hộp kiểm có cách đánh dấu khác nhau. Chúng được bao quanh một phần tử vùng chứa bằng .form-check
và các nhãn có một lớp .form-check-label
, trong khi các hộp kiểm và nút radio sử dụng .form-check-input
.
Vùng văn bản
Ví dụ
<label for="comment">Comments:</label>
<textarea class="form-control"
rows="5" id="comment" name="text"></textarea>
Hãy tự mình thử » Hàng/Lưới biểu mẫu (Biểu mẫu nội tuyến)
Nếu bạn muốn các thành phần biểu mẫu của mình xuất hiện cạnh nhau, hãy sử dụng .row
và .col
:
Ví dụ
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Hãy tự mình thử »Bạn sẽ tìm hiểu nhiều hơn về các cột và hàng trong Chương Bootstrap Grids .
Kích thước kiểm soát biểu mẫu
Bạn có thể thay đổi kích thước của đầu vào .form-control
bằng .form-control-lg
hoặc .form-control-sm
:
Ví dụ
<input type="text" class="form-control form-control-lg" placeholder="Large
input">
<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control form-control-sm"
placeholder="Small input">
Hãy tự mình thử »Đã tắt và chỉ đọc
Sử dụng các thuộc tính bị vô hiệu hóa và/hoặc chỉ đọc để tắt trường nhập:
Ví dụ
<input type="text" class="form-control" placeholder="Normal input">
<input
type="text" class="form-control" placeholder="Disabled input" disabled>
<input type="text" class="form-control" placeholder="Readonly input" readonly>
Hãy tự mình thử »Đầu vào văn bản thuần túy
Sử dụng lớp .form-control-plaintext
để tạo kiểu cho trường đầu vào không có viền, nhưng vẫn giữ các phần đệm và phần đệm phù hợp:
Ví dụ
<input type="text" class="form-control-plaintext" placeholder="Plaintext
input">
<input type="text" class="form-control" placeholder="Normal input">
Hãy tự mình thử »Bộ chọn màu
Để định kiểu đầu vào với type="color" đúng cách, hãy sử dụng lớp .form-control-color
:
Ví dụ
<input type="color" class="form-control form-control-color" value="#CCCCCC">
Hãy tự mình thử »