Form Inputs trong Bootstrap 4

Bootstrap 4 hỗ trợ khá nhiều loại điền khiển Form như input, textarea, checkbox, radio, select ... và trong bài viết này chúng ta sẽ tìm hiểu lần lượt các điều khiển đầu vào (input) trong Bootstrap 4 nhé các bạn.

Input trong Bootstrap 4

Bootstrap 4 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ử input; type="text"  và type="password". Như chúng tôi đã đề cập trong chương Form, chúng tôi sử dụng lớp .form-control để tạo kiểu đầu vào với độ rộng đầy đủ và phần đệm thích hợp, v.v.:

<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ụ dưới đây mô tả 1 textarea (vùng văn bản) trong Bootstrap 4. Thuộc tính row (dòng) dùng để định nghĩa số dòng văn bản.

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

Bootstrap Checkboxes

Chúng ta sử dụng checkbox để chọn bất cứ giá trị nào (chọn 1 hoặc nhiều hoặc không chọn) trong danh sách các lựa chọn cho trước. Ví dụ sau chúng mình mô tả 1 danh sách có 3 lựa chọn, với lựa chọn cuối cùng đã bị vô hiệu hóa.

<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>

Bạn có thể dùng lớp .form-check-inline để tạo 1 danh sách checkbox trên 1 dòng.

<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

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ị tắt:

<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 checkbox, hãy sử dụng lớp .form-check-inline nếu bạn muốn các nút radio xuất hiện trên cùng một dòng:

<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 lựa chọn (Select List)

Danh sách lựa chọn (hay còn gọi là Select list) dùng để cho phép người dùng để chọn nhiều lựa chọn khác nhau. Ví dụ sau cho phép chỉ chọn 1 lựa chọn trong danh sách 55 lựa chọn trong 1 thời điểm.

<div class="container">     <div class="form-group">
        <label for="sel1">Danh sách lựa chọn</label>
        <select class="form-control" id="sel1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</div>

Kết quả:

Bạn cũng có thể cho phép người dùng chọn nhiều lựa chọn 1 lúc bằng cách thêm multiple vào danh sách lựa chọn. Người dùng nhấn Ctrl hoặc Shift và nhấn chuột để thực hiện thao tác chọn nhiều lựa chọn.

<div class="container">   
  <div class="form-group">
        <label for="sel1">Danh sách lựa chọn</label>
        <select multiple class="form-control" id="sel1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</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-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">

Kiểm soát biểu mẫu với văn bản thuần túy (Plain Text)

Sử dụng .form-control-plaintext nếu bạn muốn định kiểu trường nhập là văn bản thuần túy:

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

Tệp và phạm vi kiểm soát biểu mẫu

Thêm lớp .form-control-range vào input type"range" hoặc .form-control-file vào input type"file" để tạo kiểu điều khiển dải ô hoặc trường tệp có độ rộng đầy đủ:

 <form action="/action_page.php">
    <div class="form-group">
      <input type="range" class="form-control-range" name="range">
    </div>
    <div class="form-group">
      <input type="file" class="form-control-file border" name="file">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>