Bootstrap 4 đầu vào biểu mẫu
Kiểm soát biểu mẫu được hỗ trợ
Bootstrap hỗ trợ các điều khiển biểu mẫu sau:
- đầu vào
- textarea
- hộp kiểm
- Đài
- lựa chọn
Đầu vào Bootstrap
Bootstrap hỗ trợ tất cả các kiểu đầu vào HTML5: văn bản, mật khẩu, ngày giờ, ngày giờ cục bộ, 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 định kiểu đầy đủ nếu kiểu của chúng không được khai báo đúng!
Ví dụ sau đây chứa hai phần tử đầu vào; một trong số type="text"và một trong số
type="password". Như chúng tôi đã đề cập trong chương Biểu mẫu, chúng tôi sử dụng .form-controllớp để định kiểu đầu vào với độ rộng đầy đủ và phần đệm thích hợp, v.v.:
Thí 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>
Bootstrap Textarea
Ví dụ sau chứa một vùng văn bản:
Thí dụ
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
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ị vô hiệu hóa:
Thí 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>
Giải thích ví dụ
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 các nhãn và hộp kiểm.
Thêm .form-check-labellớp vào các phần tử nhãn và .form-check-inputtạo kiểu cho các hộp kiểm đúng cách bên trong vùng .form-checkchứa.
Hộp kiểm nội tuyến
Sử dụng .form-check-inlinelớp nếu bạn muốn các hộp kiểm xuất hiện trên cùng một dòng:
Thí 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>
Nút radio Bootstrap
Các nút radio được sử dụng nếu bạn muốn giới hạn người dùng chỉ với 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ị vô hiệu hóa:
Thí 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>
Giống như với các hộp kiểm, hãy sử dụng .form-check-inlinelớp nếu bạn muốn các nút radio xuất hiện trên cùng một dòng:
Thí 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>
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):
Thí 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>
Kiểm soát kích thước biểu mẫu
Thay đổi kích thước của điều khiển biểu mẫu bằng .form-control-smhoặc .form-control-lg:
Thí 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">
Kiểm soát biểu mẫu với văn bản thuần túy
Sử dụng .form-control-plaintextnếu bạn muốn định kiểu trường nhập là văn bản thuần túy:
Thí dụ
<input type="text" class="form-control-plaintext">
Tệp và phạm vi kiểm soát biểu mẫu
Thêm .form-control-rangelớp vào input type"range"hoặc .form-control-fileđể input type"file"tạo kiểu điều khiển dải ô hoặc trường tệp có độ rộng đầy đủ:
Thí dụ
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">