Tạo form (biểu mẫu) tùy chỉnh trong Bootstrap

Bootstrap 4 cho phép người dùng tùy chỉnh form control mặc định trên trình duyệt để tạo bố cục form (biểu mẫu) mới theo ý muốn. Người dùng có thể tạo các nút radio và hộp checkbox tùy chỉnh tương thích với trình duyệt, các file đầu vào, menu dropdown, ... .

Tạo Hộp Checkbox Tùy Chỉnh Trong Bootstrap

Để tạo các hộp checkbox tùy chỉnh trong Bootstrap, chúng ta chỉ cần bọc từng checkbox input và label tương ứng trong phần tử div và áp dụng các lớp như trong ví dụ dưới đây:

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Custom checkbox</label>
</div>
<div class="custom-control custom-checkbox mt-2">
    <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck2" checked>
    <label class="custom-control-label" for="customCheck2">Another custom checkbox</label>
</div>

Xem ví dụ

Tạo Các Nút Radio Tùy Chỉnh Trong Bootstrap

Tương tự, chúng ta cũng có thể tạo các nút radio tùy chỉnh bằng cách sử dụng Bootstrap như trong ví dụ dưới đây:

<div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
    <label class="custom-control-label" for="customRadio1">Custom radio</label>
</div>
<div class="custom-control custom-radio mt-2">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
    <label class="custom-control-label" for="customRadio2">Another custom radio</label>
</div>

Xem ví dụ

Ngoài ra chúng ta cũng có thể đặt vị trí các hộp checkbox và nút radio theo hàng ngang bằng cách thêm lớp .custom-control-inline trong phần tử div như trong ví dụ dưới đây:

<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
    <label class="custom-control-label" for="customRadio1">Custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
    <label class="custom-control-label" for="customRadio2">Another custom radio</label>
</div>

Xem ví dụ

Vô Hiệu Hóa Các Hộp Checkbox Và Nút Radio Tùy Chỉnh

Để vô hiệu hóa các hộp checkbox và nút radio tùy chỉnh, chúng ta chỉ cần thêm thuộc tính disabled vào phần tử input.

Ví dụ: trong ví dụ dưới đây chúng ta sẽ thêm thuộc tính disabled vào phần tử input để vô hiệu hóa các hộp checkbox và nút radio tùy chỉnh: 

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" disabled>
    <label class="custom-control-label" for="customCheck">Disabled custom checkbox</label>
</div>
<div class="custom-control custom-radio mt-2">
    <input type="radio" class="custom-control-input" id="customRadio" disabled>
    <label class="custom-control-label" for="customRadio">Disabled custom radio</label>
</div>

Xem ví dụ

Tạo Nút Chuyển Đổi (Nút Bật Tắt)

Nút chuyển đổi tượng tự như hộp checkbox tùy chỉnh, chỉ khác nó sử dụng lớp .custom-switch thay thế lớp .custom-checkbox để hiển thị thanh trượt bật tắt.

Ngoài ra các nút chuyển đổi trong Bootstrap cũng hỗ trợ thuộc tính disable.

Ví dụ: trong ví dụ dưới đây minh họa cách tạo một nút chuyển đổi trong Bootstrap:

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Toggle switch</label>
</div>
<div class="custom-control custom-switch mt-2">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

 Xem ví dụ

Tạo Menu Tùy Chỉnh Trong Bootstrap

Để tạo menu tùy chỉnh, chúng ta chỉ cần thêm lớp .custom-select trên phần tử select. Tuy nhiên giao diện menu tùy chỉnh vẫn giữ nguyên giao diện menu ban đầu, chúng ta không thể sửa đổi thẻ option do giới hạn trình duyệt.

Ví dụ: trong ví dụ dưới đây chúng ta sẽ tạo một menu tùy chỉnh trong Bootstrap:

<select class="custom-select">
    <option selected>Custom select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Xem ví dụ

Ngoài ra chúng ta cũng có thể tạo các menu tùy chỉnh với các kích thước khác nhau (lớn, mặc định, nhỏ) sao cho phù hợp với kích thước văn bản đầu vào trong Bootstrap như trong ví dụ dưới đây:

<select class="custom-select custom-select-lg">
    <option selected>Large custom select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="custom-select mt-3">
    <option selected>Default custom select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm mt-3">
    <option selected>Small custom select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

 Xem ví dụ

Thẻ select trong Bootstrap cũng hỗ trợ các thuộc tính như multiple và size.

Ví dụ:

<select class="custom-select" size="3" multiple>
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Xem ví dụ 

Tạo Phạm Vi Đầu Vào Tùy Chỉnh Trong Bootstrap

Để tạo phạm vi đầu vào tùy chỉnh, chỉ cần áp dụng lớp .custom-range cho thẻ input type="range".

Ví dụ: trong ví dụ dưới đây chúng ta sẽ tạo phạm vi đầu vào tùy chỉnh trong Bootstrap:

<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange">

 Xem ví dụ

Mặc định giá trị ngầm cho phạm vi đầu vào tối thiểu là 0 và tối đa là 100. Tuy nhiên nếu muốn chúng ta có thể chỉ định các giá trị mới bằng cách sử dụng các thuộc tính min và max.

Ngoài ra phạm vi đầu vào là các giá trị số nguyên theo mặc định. Để thay đổi các giá trị này, chúng ta chỉ cần chỉ định giá trị step.

Ví dụ: trong ví dụ dưới đây giá trị step được chỉ định là 0.5:

<label for="customRange">Custom range</label>
<input type="range" class="custom-range" min="0" max="10" step="0.5" id="customRange">

Xem ví dụ

Tạo File Đầu Vào Tùy Chỉnh Trong Bootstrap

Trong Bootstrap 4 chúng ta có thể tạo các file đầu vào tùy chỉnh và hiển thị một cách nhất quán trên các trình duyệt.

Ví dụ: trong ví dụ dưới đây chúng ta sẽ tạo một file đầu vào tùy chỉnh trong Bootstrap:

<div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
</div>

 Xem ví dụ