Đầu vào biểu mẫu Bootstrap
Đ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 những loại văn bản và một trong những loại mật khẩu:
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="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div> Hãy tự mình thử » Sử dụng lớp .checkbox-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ụ
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label> 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 đầu tiên được chọn theo mặc định và tùy chọn cuối cùng bị tắt:
Ví dụ
<div class="radio">
<label><input type="radio" name="optradio"
checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div> Hãy tự mình thử » Sử dụng lớp .radio-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ụ
<label class="radio-inline"><input type="radio" name="optradio"
checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
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ử »