Bootstrap Form Inputs

♠ Posted by Hà Phạm in Bootstrap,Bootstrap Form Inputs,học Bootstrap at 11:01 AM

Bài hôm nay, Thiết kế web Hà Nội sẽ cùng các bạn tìm hiểu tiếp về Bootstrap Form Inputs. Các bạn hãy làm luôn code để có thể trải nghiệm luôn nhé!

Hỗ trợ điều khiển Form

Bootstrap hỗ trợ các các điều khiển Form sau đây:

• Input
• Textarea
• Checkbox
• Radio
• Select

---

Bootstrap Input

Bootstrap hỗ trợ tất cả các loại đầu vào HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Lưu ý: Đầu vào sẽ không được theo kiểu hoàn toàn nếu loại của họ không được khai báo đúng!

Ví dụ sau đây có hai yếu tố đầu vào; một trong các 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>

Xem thêm: Bootstrap Form

---

Bootstrap Textarea 

Ví dụ sau đây có 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>

---

Bootstrap CheckBoxes

Hộp kiểm tra được sử dụng nếu bạn muốn người dùng lựa chọn bất kỳ số lượng tùy chọn từ một danh sách các tùy chọn cài sẵn.

Ví dụ sau đây chứa ba hộp kiểm tra. Trường hợp cuối cùng là vô hiệu hóa (disabed):

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>

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>

---

Bootstrap Radio Buttons

Nút radio được sử dụng nếu bạn muốn giới hạn người sử dụng chỉ là một lựa chọn từ một danh sách các tùy chọn cài sẵn.

Ví dụ sau có ba nút radio. Trường hợp cuối cùng là vô hiệu hóa (disabed):

Ví dụ

<div class="radio">
  <label><input type="radio" name="optradio">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 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">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>

---

Bootstrap List

Chọn danh sách được sử dụng nếu bạn muốn cho phép người dùng chọn từ nhiều lựa chọn.

Ví dụ sau đây có chứa một danh sách thả xuống (danh sách lựa 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>