Đầu vào biểu mẫu Bootstrap
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 loại văn bản và một loại mật khẩu:
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="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>
Sử dụng .checkbox-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ụ
<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>
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 đầu tiên được chọn theo mặc định và tùy chọn cuối cùng bị tắt:
Thí 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>
Sử dụng .radio-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ụ
<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>
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>