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

Trong bài học Bootstrap trước Taimienphi.vn đã hướng dẫn bạn cách tạo form (biểu mẫu) trong Bootstrap. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ hướng dẫn tiếp bạn cách tạo form (biểu mẫu) tùy chỉnh trong Bootstrap.

Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu cách tạo form (biểu mẫu) tùy chỉnh trong Bootstrap.

tao form bieu mau tuy chinh trong bootstrap hoc bootstrap

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

 

Mục Lục bài viết:
1. Tạo form (biểu mẫu) tùy chỉnh trong Bootstrap
2. Tạo hộp checkbox tùy chỉnh trong Bootstrap
3. Tạo các nút radio tùy chỉnh trong Bootstrap
4. Vô hiệu hóa các hộp checkbox và nút radio tùy chỉnh
5. Tạo nút chuyển đổi (nút bật tắt)
6. Tạo menu tùy chỉnh trong Bootstrap
7. Tạo phạm vi đầu vào tùy chỉnh trong Bootstrap
8. Tạo file đầu vào tùy chỉnh trong Bootstrap

 

1. 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, ... .

 

2. 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 label tương ứng trong phần tử div và áp dụng các lớp như trong ví dụ dưới đây:

tao form bieu mau tuy chinh trong bootstrap

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 2

 

3. 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:

tao form bieu mau tuy chinh trong bootstrap 3

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 4

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:

tao form bieu mau tuy chinh trong bootstrap 5

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 6

 

4. 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:

tao form bieu mau tuy chinh trong bootstrap 7

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 8

 

5. 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:

tao form bieu mau tuy chinh trong bootstrap 9

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 10

 

6. 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:

tao form bieu mau tuy chinh trong bootstrap 11

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 12

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:

tao form bieu mau tuy chinh trong bootstrap 13

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 14

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

Ví dụ:

tao form bieu mau tuy chinh trong bootstrap 15

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 16

 

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

tao form bieu mau tuy chinh trong bootstrap 17

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 18

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

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:

tao form bieu mau tuy chinh trong bootstrap 19

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 20

 

8. 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:

tao form bieu mau tuy chinh trong bootstrap 21

Kết quả trả về có dạng như dưới đây:

tao form bieu mau tuy chinh trong bootstrap 22

Mẹo: Bootstrap ẩn file input mặc định thông qua opacity và style label. Phần tử giả ::after được sử dụng để tạo và xác định vị trí của nút.

Cuối cùng transparent-input được đặt ở trên style-label bằng cách sử dụng CSS positioning với các thuộc tính widthheight phù hợp để kích hoạt hộp thoại chọn file.

Bài học trên đây Taimienphi.vn vừa hướng dẫn bạn cách tạo form trong Bootstrap điều chỉnh. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn cách sử dụng Input Group trong Bootstrap.

https://thuthuat.taimienphi.vn/tao-form-bieu-mau-tuy-chinh-trong-bootstrap-51114n.aspx
Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.

Tác giả: Hoàng Bách     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Top 5 trình tạo form, biểu mẫu trực tuyến tốt nhất 2021
Cách tạo biểu mẫu bằng Google Drive
Tạo Breadcrumb trong Bootstrap
Google Forms sẽ sớm cho phép lưu biểu mẫu chưa hoàn thành dưới dạng bản nháp
List Group trong Bootstrap, tác dụng và cách tạo
Từ khoá liên quan:

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

, Bootstrap, học Bootstrap,

SOFT LIÊN QUAN
  • Google Form

    Tạo biểu mẫu trực tuyến trên Google

    Google Form là phần mềm miễn phí cho phép bạn tạo các loại khảo sát và biểu mẫu trực tuyến. Là một phần trong bộ ứng dụng dựa trên web của Google như Docs, Sheets, Slides,.. Google Form là một công cụ linh hoạt có thể được sử dụng cho nhiều ứng dụng khác nhau và được người dùng đánh giá rất cao về độ tiện dụng.
  • Wufoo Công cụ tạo form trực tuyến đơn giản
  • Form Auto Fill Portable Tự động điền tài khoản trên các trang web
  • Form Auto Fill Tự động điền tài khoản trên các trang web
  • Gravity Forms Trình tạo Form trực tuyến dựa trên WordPress
  • DA FormMaker Tạo form HTML, thiết kế nội dung website

Tin Mới