Đầu vào biểu mẫu Bootstrap 4
Điều khiển biểu mẫu được hỗ trợ
Bootstrap hỗ trợ các điều khiển biểu mẫu sau:
- đầu vào
- vùng văn bản
- hộp kiểm
- Đài
- lựa chọn
Đầu vào khởi động
Bootstrap hỗ trợ tất cả các loại đầu vào HTML5: văn bản, mật khẩu, datetime, datetime-local, ngày, tháng, giờ, tuần, số, email, url, tìm kiếm, số điện thoại và màu sắc.
Lưu ý: Đầu vào sẽ KHÔNG được tạo kiểu đầy đủ nếu loại của chúng không được khai báo chính xác!
Ví dụ sau chứa hai phần tử đầu vào; một trong type="text"
và một trong type="password"
. Như chúng tôi đã đề cập trong chương Biểu mẫu, chúng tôi sử dụng lớp .form-control
để tạo kiểu cho các đầu vào có độ rộng đầy đủ và phần đệm phù hợp, v.v.:
Ví dụ
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Hãy tự mình thử »Vùng văn bản Bootstrap
Ví dụ sau chứa một vùng văn bản:
Ví dụ
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Hãy tự mình thử » Hộp kiểm Bootstrap
Hộp kiểm được sử dụng nếu bạn muốn người dùng chọn bất kỳ số lượng tùy chọn nào từ danh sách các tùy chọn đặt trước.
Ví dụ sau có ba hộp kiểm. Tùy chọn cuối cùng bị tắt:
Ví dụ
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Hãy tự mình thử »Ví dụ giải thích
Sử dụng phần tử trình bao bọc với class="form-check"
để đảm bảo lề thích hợp cho nhãn và hộp kiểm.
Thêm lớp .form-check-label
vào các thành phần nhãn và .form-check-input
để tạo kiểu cho các hộp kiểm bên trong vùng chứa .form-check
.
Hộp kiểm nội tuyến
Sử dụng lớp .form-check-inline
nếu bạn muốn các hộp kiểm xuất hiện trên cùng một dòng:
Ví dụ
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Hãy tự mình thử »Nút radio Bootstrap
Nút radio được sử dụng nếu bạn muốn giới hạn người dùng chỉ một lựa chọn từ danh sách các tùy chọn đặt trước.
Ví dụ sau có ba nút radio. Tùy chọn cuối cùng bị tắt:
Ví dụ
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Hãy tự mình thử » Giống như các hộp kiểm, hãy sử dụng lớp .form-check-inline
nếu bạn muốn các nút radio xuất hiện trên cùng một dòng:
Ví dụ
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Hãy tự mình thử »Danh sách chọn Bootstrap
Danh sách chọn được sử dụng nếu bạn muốn cho phép người dùng chọn từ nhiều tùy chọn.
Ví dụ sau chứa danh sách thả xuống (danh sách chọn):
Ví dụ
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Hãy tự mình thử »Kích thước kiểm soát biểu mẫu
Thay đổi kích thước của điều khiển biểu mẫu bằng .form-control-sm
hoặc .form-control-lg
:
Ví dụ
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Hãy tự mình thử »Kiểm soát biểu mẫu bằng văn bản thuần túy
Sử dụng .form-control-plaintext
nếu bạn muốn định kiểu trường nhập dưới dạng văn bản thuần túy:
Tệp và phạm vi kiểm soát biểu mẫu
Thêm lớp .form-control-range
vào input type"range"
hoặc .form-control-file
vào input type"file"
để tạo kiểu cho điều khiển phạm vi hoặc trường tệp có chiều rộng đầy đủ:
Ví dụ
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">
Hãy tự mình thử »