Bootstrap Form Tùy Chỉnh

Trong hướng dẫn này, bạn sẽ học cách tạo các điều khiển biểu mẫu (form) tùy chỉnh với Bootstrap.

Tạo điều khiển biểu mẫu tùy chỉnh

Bootstrap cho phép bạn tùy chỉnh các điều khiển biểu mẫu mặc định của trình duyệt để tạo các bố cục biểu mẫu trang nhã hơn. Giờ đây, bạn có thể tạo các checkbox, radio button, file input, select dropdown, range input, ... tùy chỉnh và hoàn toàn tương thích với nhiều trình duyệt.

Trong các phần sau, bạn sẽ thấy cách tạo từng phần tử biểu mẫu tùy chỉnh đó.

Tạo checkbox tùy chỉnh

Để tạo các checkbox (hộp kiểm) tùy chỉnh, hãy bao bọc mỗi hộp kiểm <input> và phần tử <label> tương ứng của chúng trong một phần tử <div> và áp dụng các lớp như được hiển thị trong ví dụ sau:

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

Kết quả của ví dụ trên sẽ giống như sau:

Tạo các radio button tùy chỉnh

Tương tự, bạn có thể tạo các nút radio tùy chỉnh bằng Bootstrap như sau:

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

Kết quả của ví dụ trên sẽ giống như sau:

Checkbox và radio button trên cùng một hàng

Bạn cũng có thể đặt các hộp kiểm tùy chỉnh này và các nút radio trong cùng một hàng bằng cách chỉ cần thêm lớp .form-check-inline vào phần tử .form-check.

Ví dụ sau sẽ hiển thị các hộp kiểm trong cùng một hàng.

<div class="form-check form-check-inline">
    <input type="checkbox" class="form-check-input" name="customCheck" id="customCheck1">
    <label class="form-check-label" for="customCheck1">Custom checkbox</label>
</div>
<div class="form-check form-check-inline">
    <input type="checkbox" class="form-check-input" name="customCheck" id="customCheck2" checked>
    <label class="form-check-label" for="customCheck2">Another custom checkbox</label>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tương tự, bạn có thể đặt các nút radio vào cùng một hàng, như được hiển thị trong ví dụ sau:

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

Kết quả của ví dụ trên sẽ giống như sau:

Vô hiệu hóa checkbox và radio button tùy chỉnh

Hộp kiểm và nút radio tùy chỉnh cũng có thể bị vô hiệu hóa. Chỉ cần thêm thuộc tính boolean disabled vào phần tử <input>, như được hiển thị trong ví dụ sau:

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

Kết quả của ví dụ trên sẽ giống như sau:

Tạo công tắc chuyển đổi

Công tắc tương tự như hộp kiểm tùy chỉnh — sự khác biệt duy nhất là — nó sử dụng lớp .form-switch để hiển thị một công tắc bật tắt. Công tắc cũng hỗ trợ thuộc tính disabled.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switchDefault">
    <label class="form-check-label" for="switchDefault">Default switch checkbox</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switchChecked" checked>
    <label class="form-check-label" for="switchChecked">Checked switch checkbox</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switchDisabled" disabled>
    <label class="form-check-label" for="switchDisabled">Disabled switch checkbox</label>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo menu lựa chọn tùy chỉnh

Bạn cũng có thể tùy chỉnh các menu thả xuống được chọn bằng cách chỉ cần thêm lớp .form-select vào phần tử <select>. Tuy nhiên, kiểu tùy chỉnh này chỉ giới hạn ở giao diện ban đầu của phần tử <select> và không thể sửa đổi các phần tử <option> do các giới hạn của trình duyệt.

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

Kết quả của ví dụ trên sẽ giống như sau:

Bạn cũng có thể thêm thuộc tính disabled trên một select tùy chỉnh để làm cho nó xuất hiện màu xám và xóa các sự kiện con trỏ, như được hiển thị trong ví dụ sau:

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

Kết quả của ví dụ trên sẽ giống như sau:

Bạn cũng có thể tạo biến thể lớn và nhỏ của các select tùy chỉnh để phù hợp với chiều cao của các input có kích thước tương tự của Bootstrap bằng cách sử dụng các lớp .form-select-lg và .form-select-sm trên phần tử <select> tương ứng. Hãy xem ví dụ sau:

<select class="form-select form-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="form-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="form-select form-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>

Kết quả của ví dụ trên sẽ giống như sau:

Select tùy chỉnh Bootstrap cũng hỗ trợ các thuộc tính multiple và size như select thông thường:

<select class="form-select" size="3" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

Tạo input range tùy chỉnh

Để tạo input range tùy chỉnh, chỉ cần áp dụng lớp .form-range cho phần tử <input type="range">.

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

Kết quả của ví dụ trên sẽ giống như sau:

Bạn cũng có thể thêm thuộc tính disabled trên input range để làm cho nó xuất hiện màu xám và xóa các sự kiện con trỏ, như được hiển thị trong ví dụ sau:

<label for="customRange">Disabled range</label>
<input type="range" class="form-range" id="customRange" disabled>

Kết quả của ví dụ trên sẽ giống như sau:

Đặt giá trị tối thiểu và giá trị tối đa

Theo mặc định, input range có các giá trị ngầm định cho tối thiểu và tối đa - 0 và 100, tương ứng. Tuy nhiên, bạn có thể chỉ định các giá trị mới cho những giá trị sử dụng thuộc tính min và max.

Ngoài ra, theo mặc định, input range "gắn" vào các giá trị số nguyên. Để thay đổi điều này, bạn có thể chỉ định một giá trị step. Trong ví dụ sau, chúng tôi đã tăng gấp đôi số bước bằng cách sử dụng step="0.5".

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

Bootstrap • Bootstrap Cơ Bản