Học cách sáng tạo biểu mẫu (form) trong Bootstrap

Trong những bài học Bootstrap trước đó, Mytour đã hướng dẫn cách tạo danh sách bằng Bootstrap. Trong bài học tiếp theo, Mytour sẽ hướng dẫn chi tiết về cách tạo biểu mẫu (form) trong Bootstrap.

1. Tạo biểu mẫu trong Bootstrap

Biểu mẫu HTML đóng vai trò quan trọng trong trải nghiệm của người dùng trên trang web và ứng dụng. Bootstrap giúp đơn giản hóa quá trình tạo kiểu và bố trí cho các biểu mẫu, giúp chúng trở nên nhanh chóng và hấp dẫn.

Bootstrap tự động xử lý việc thiết kế và điều chỉnh các yếu tố như nhãn, ô nhập liệu, ô kiểm, giúp bạn tiết kiệm thời gian và tăng tính thẩm mỹ cho biểu mẫu.

Bootstrap cung cấp 3 kiểu bố cục biểu mẫu khác nhau, bao gồm:

- Bố cục theo chiều dọc (mặc định) cho biểu mẫu.

- Sắp xếp form theo chiều ngang.

- Bố cục nội tuyến cho biểu mẫu.

2. Tạo bố cục theo chiều dọc

Đây là kiểu bố cục mặc định cho biểu mẫu trong Bootstrap, với các kiểu dáng được tự động áp dụng cho các lớp form-control mà không cần thêm lớp cơ sở cho phần tử form.

Các lớp form-control trong bố cục này được sắp xếp chồng lên nhau với nhãn left-aligned tại góc trên cùng.

Ví dụ: ví dụ dưới đây là minh họa cách tạo bố cục form theo chiều dọc:

Kết quả trả về sẽ có dạng như sau:

Chú ý: Tất cả các thẻ, bao gồm input, textarea và select, đều yêu cầu lớp .form-control để áp dụng kiểu chung. Lớp .form-control có chiều rộng là 100%. Để thay đổi chiều rộng, chúng ta có thể sử dụng các lớp lưới có sẵn.

3. Tạo bố cục form theo chiều ngang

Bên cạnh đó, có thể tạo bố cục form theo chiều ngang, với việc đặt nhãn và nút điều khiển cùng một hàng, sử dụng lớp lưới trong Bootstrap.

Để tạo bố cục form theo chiều ngang, thêm lớp .row vào các form-group và sử dụng lớp lưới .col-*-* để định chiều rộng cho nhãn và nút điều khiển.

Không quên áp dụng lớp .col-form-label cho các label để căn chỉnh nút điều khiển trong biểu mẫu. Xem ví dụ dưới đây:

Kết quả trả về sẽ có dạng như sau:

4. Tạo bố cục form nội tuyến

Trong một số trường hợp, để hiển thị loạt nhãn và nút điều khiển trên một hàng để thu gọn bố cục, thêm lớp .form-inline vào phần tử form. Tuy nhiên, bố cục form nội tuyến chỉ hiển thị khi chiều rộng của viewport đạt tối thiểu 576px.

Ví dụ: Trong ví dụ dưới đây, chúng ta sẽ tạo một bố cục form nội tuyến:

Kết quả trả về sẽ có dạng như sau:

Lưu ý:

Mytour khuyến cáo việc thêm nhãn cho đầu vào form (biểu mẫu) để tránh sự cố với trình đọc màn hình. Tuy nhiên, trong trường hợp bố cục form nội tuyến, chúng ta có thể ẩn các nhãn bằng cách sử dụng lớp .sr-only.

5. Tạo form control tĩnh

Trong một số trường hợp, nếu chỉ muốn hiển thị giá trị văn bản thuần túy (plain text) bên cạnh các nhãn thay vì form control, chúng ta chỉ cần thay thế lớp .form-control bằng lớp .form-control-plaintext và áp dụng thuộc tính readonly.

Lớp .form-control-plaintext loại bỏ các style mặc định khỏi khung biểu mẫu nhưng vẫn giữ nguyên phần lề và phần padding.

Ví dụ: Trong ví dụ dưới đây, minh họa cách tạo form control tĩnh:

Kết quả trả về sẽ có dạng như sau:

6. Hộp checkbox và nút radio

Hộp checkbox (hộp đánh tích) và các nút radio có thể được xếp theo chiều dọc hoặc chiều ngang.

6.1 Xếp các hộp checkbox và nút radio theo chiều dọc

Để xếp các hộp checkbox hoặc nút radio theo chiều dọc, tức là từng dòng một, chúng ta chỉ cần bọc tất cả các control trong một form group và áp dụng lớp d-block trong thẻ label.

Ngoài ra, chúng ta có thể tận dụng các lớp tiện ích căn chỉnh để tạo ra khoảng cách phù hợp. Như minh họa trong ví dụ sau đây.

Ví dụ: trong ví dụ này, các hộp đánh dấu và nút radio được sắp xếp theo chiều dọc:

Kết quả trả về sẽ hiển thị như sau:

6.2 Xếp các hộp đánh dấu và nút radio theo chiều ngang

Để sắp xếp hộp đánh dấu và nút radio theo chiều ngang, tức là đặt chúng cùng một hàng, chúng ta chỉ cần đặt tất cả các form control vào một nhóm form và sử dụng các lớp tiện ích căn lề để duy trì khoảng cách phù hợp.

Hơn nữa, trong trường hợp này, chúng ta không cần sử dụng lớp .d-block trong phần tử label.

Ví dụ: trong ví dụ dưới đây, chúng ta sẽ sắp xếp các hộp đánh dấu và nút radio theo chiều ngang:

Kết quả trả về sẽ hiển thị như sau:

7. Tạo form bị vô hiệu hóa

Để vô hiệu hóa các form control như input, textarea, select, chúng ta chỉ cần thêm thuộc tính disabled cho các form control này và Bootstrap sẽ thực hiện phần còn lại. Tham khảo ví dụ dưới đây:

Kết quả trả về có dạng như sau:

Trong trường hợp muốn vô hiệu hóa tất cả các control trong form cùng một lúc, chúng ta chỉ cần đặt các control này trong phần tử fieldset và áp dụng thuộc tính disabled như trong ví dụ dưới đây:

Kết quả trả về sẽ hiển thị như sau:

8. Tạo đầu vào chỉ đọc

Chúng ta cũng có thể thêm thuộc tính readonly vào các thẻ input hoặc textarea để ngăn chặn việc chỉnh sửa giá trị của chúng.

Ví dụ, trong đoạn mã dưới đây, chúng ta sẽ áp dụng thuộc tính readonly vào các thẻ input hoặc textarea để tạo ra đầu vào chỉ đọc:

Kết quả sẽ xuất hiện như sau:

9. Chỉ định kích thước cột của các form control Input, Textareas và Select

Để thiết lập kích thước của form control với kích thước cột lưới của Bootstrap, chúng ta chỉ cần bọc các form control như input, textarea và select trong các cột lưới hoặc phần tử bất kỳ và áp dụng các lớp lưới tương ứng.

Ví dụ: trong đoạn mã dưới đây là minh họa cách chỉ định kích thước cột cho các form control Input, Textareas và Select:

Kết quả sẽ hiển thị như sau:

Mẹo: bổ sung vào đó, thay vì sử dụng lớp .form-row khi tạo bố cục biểu mẫu, bạn có thể áp dụng lớp .form-row như là một biến thể của lớp grid.row trong Bootstrap. Lớp này ghi đè các khoảng trắng giữa nội dung cột (gutter) để tạo ra bố cục sạch sẽ và gọn gàng hơn.

10. Kích thước chiều cao của form control Input và Select

Để điều chỉnh chiều cao của ô nhập và các hộp chọn sao cho phù hợp với kích thước của các nút, bạn có thể sử dụng các lớp chỉ định kích thước chiều cao form control như .form-control-lg, .form-control-sm trên các hộp input và select để chỉ định kích thước lớn hoặc nhỏ.

Hãy nhớ thêm lớp .col-form-label-sm hoặc .col-form-label-lg cho các phần tử label hoặc legend để điều chỉnh kích thước nhãn phù hợp với form control.

Ví dụ: ví dụ sau mô tả cách điều chỉnh chiều cao của ô nhập và hộp chọn:

Kết quả hiển thị sẽ giống như sau:

11. Vị trí text xung quanh Form Control

Để hướng dẫn người dùng nhập liệu chính xác vào biểu mẫu, bạn có thể thêm văn bản xung quanh các form control bằng cách sử dụng lớp .form-text.

Ví dụ:

Kết quả sẽ hiển thị như sau:

Tương tự, bạn cũng có thể sử dụng phần tử small để thêm văn bản mà không cần sử dụng lớp .form-text.

Ví dụ: Trong ví dụ sau, chúng ta áp dụng phần tử small để thêm văn bản:

Kết quả trả về sẽ có dạng như sau:

12. Tạo biểu mẫu xác thực bằng Bootstrap

Để xác thực các biểu mẫu web một cách nhanh chóng và dễ dàng ở phía máy khách, Bootstrap 4 cung cấp các giải pháp thông qua API xác thực biểu mẫu của trình duyệt.

Các lớp xác thực biểu mẫu trong CSS bao gồm :invalid và:valid pseudo-classes, được áp dụng cho các phần tử input, select và textarea.

Ví dụ: cho ví dụ dưới đây:

Kết quả trả về sẽ có dạng như sau:

Lưu ý: Đối với thông báo xác thực biểu mẫu trong Bootstrap, chúng ta cần vô hiệu hóa tooltip phản hồi mặc định của trình duyệt bằng cách thêm thuộc tính novalidate cho phần tử form.

Dưới đây là đoạn mã JavaScript tùy chỉnh để hiển thị thông báo lỗi và ngăn chặn việc gửi biểu mẫu trong các trường không hợp lệ.

Gợi ý: Để làm mới giao diện biểu mẫu theo chương trình, bạn chỉ cần loại bỏ lớp .was-validated khỏi phần tử form. Bootstrap tự động áp dụng lớp này sau khi người dùng nhấp vào nút Gửi.

Để yêu cầu xác thực từ phía máy chủ, chỉ cần sử dụng các lớp .is-invalid và .is-valid để hiển thị trạng thái của các mục trong khung là hợp lệ hoặc không hợp lệ. Thêm vào đó, .invalid-feedback và .valid-feedback được sử dụng để cung cấp thông điệp phản hồi cho trạng thái tương ứng.

Ví dụ:

Kết quả trả về sẽ xuất hiện như sau:

Bổ sung, bạn có thể thay thế các lớp .{valid|invalid}-feedback bằng các lớp .{valid|invalid}-tooltip để hiển thị phản hồi dưới dạng tooltip.

Đảm bảo đã áp dụng style position: relative hoặc lớp .position-relative trên phần tử cha để hiển thị tooltip phản hồi một cách chính xác. Xem ví dụ bên dưới để biết thêm chi tiết:

Kết quả trả về sẽ có dạng như sau:

13. Form Control được hỗ trợ trong Bootstrap

Bootstrap hỗ trợ tất cả các điều khiển biểu mẫu HTML tiêu chuẩn và các loại đầu vào HTML5 như datetime, number, email, url, search, range, color, url, ... .

Ví dụ: dưới đây là ví dụ minh họa cách sử dụng điều khiển biểu mẫu tiêu chuẩn với Bootstrap.

Kết quả trả về sẽ có dạng như sau:

Trên đây, Mytour đã hướng dẫn bạn cách tạo biểu mẫu trong Bootstrap. Nếu có bất kỳ thắc mắc hay câu hỏi nào cần giải đáp, hãy chia sẻ ý kiến của bạn trong phần bình luận dưới bài viết.

Trong bài học tiếp theo, Mytour sẽ tiếp tục hướng dẫn cách tạo biểu mẫu tùy chỉnh trong Bootstrap.