Supported Form Controls

Bootstrap hỗ trợ các trường biểu mẫu sau:

• input
• textarea
• checkbox
• radio
• select

Bootstrap Input

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

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>

Bootstrap Textarea

Comment:

Ví dụ sau có chứa một textarea:

Ví dụ

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

Bootstrap Checkboxes

Option 1

Option 2

Option 3

Ví dụ sau chứa ba checkboxes. Checkbox cuối là disabled:

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>

Giải thích ví dụ

Hãy dùng phần tử <div> bao bọc có class="form-check" để đảm bảo margins cho labels và checkboxes.

Add class .form-check-label cho phần tử label, và .form-check-input để style chuẩn checkboxes bên trong .form-check.

Inline Checkboxes

Sử dụng class .form-check-inline nếu bạn muốn checkboxes hiển thị trên 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>

Bootstrap Radio Buttons

Option 1

Option 2

Option 3

Ví dụ sau chứa ba radio buttons. Radio button cuối là disabled:

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>

Cũng như checkboxes, sử dụng class .form-check-inline nếu bạn muốn radio buttons hiển thị 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>

Bootstrap Select List

Select list (chỉ cho phép chọn một):         1         2         3         4       
Multiple select list (giữ ctrl hoặc shift (hoặc giữ kéo thả chuột) để chọn nhiều):         1         2         3         4         5       

Ví dụ sau đây cho thấy một dropdown list (select list):

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>

Form Control Sizing

Thay đổi kích cỡ của form control với .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">

Form Control với Plain Text

Sử dụng class .form-control-plaintext nếu bạn muốn style trường input kiểu plain text:

Ví dụ

<input type="text" class="form-control-plaintext">

Form Control File và Range

Add class .form-control-range cho input type="range" hoặc .form-control-file cho input type="file" cho một range control hoặc một trường input type="file":

Ví dụ

<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">