Tôi có thể sử dụng các trường biểu mẫu nào?
Để mang lại trải nghiệm tốt nhất có thể cho người dùng, hãy nhớ sử dụng phần tử và phần tử type phù hợp nhất với dữ liệu mà người dùng đang nhập.
Giúp người dùng điền văn bản
Để cung cấp cho người dùng một trường trong biểu mẫu để chèn văn bản, hãy sử dụng phần tử <input>.
Đây là lựa chọn tốt nhất cho từ đơn và văn bản ngắn.
Đối với văn bản dài hơn, hãy sử dụng phần tử <textarea>.
Điều này cho phép nhiều dòng văn bản và giúp người dùng xem văn bản họ đã nhập dễ dàng hơn vì thành phần này có thể cuộn và thay đổi kích thước.
Đảm bảo người dùng nhập dữ liệu theo đúng định dạng
Bạn có muốn giúp người dùng điền số điện thoại không?
Thay đổi thuộc tính type thành type="tel" cho <input>.
Người dùng thiết bị di động sẽ có bàn phím ảo phù hợp, đảm bảo họ có thể nhập số điện thoại nhanh và dễ dàng hơn.
Đối với địa chỉ email, hãy sử dụng type="email".
Một lần nữa, bàn phím ảo được điều chỉnh lại xuất hiện.
Dùng thuộc tính required để tạo trường biểu mẫu bắt buộc.
Khi biểu mẫu được gửi, trình duyệt sẽ kiểm tra để đảm bảo dữ liệu nhập có giá trị và hợp lệ: trong trường hợp này, đó là địa chỉ email được định dạng tốt.
Tìm hiểu thêm về các loại dữ liệu đầu vào khác nhau. Các trình duyệt này cũng cung cấp tính năng xác thực tích hợp sẵn.
Giúp người dùng điền ngày tháng
Bạn muốn bắt đầu chuyến đi tiếp theo khi nào?
Để giúp người dùng điền ngày, hãy sử dụng type="date".
Một số trình duyệt cho thấy định dạng dưới dạng phần giữ chỗ, chẳng hạn như yyyy-mm-dd, minh hoạ cách nhập ngày.
Tất cả trình duyệt hiện đại đều cung cấp giao diện tuỳ chỉnh để chọn ngày dưới dạng bộ chọn ngày.
Giúp người dùng chọn một chế độ
Để đảm bảo người dùng có thể chọn hoặc bỏ chọn một tuỳ chọn khả thi, hãy sử dụng type="checkbox".
Bạn có muốn cung cấp nhiều lựa chọn không?
Tuỳ thuộc vào trường hợp sử dụng, có nhiều lựa chọn thay thế.
Trước tiên, hãy xem các giải pháp khả thi nếu người dùng chỉ có thể chọn một tuỳ chọn.
Bạn có thể sử dụng nhiều phần tử <input> với type="radio" và cùng một giá trị name. Người dùng thấy tất cả các lựa chọn cùng một lúc, nhưng chỉ có thể chọn một.
Một cách khác là sử dụng phần tử <select>.
Người dùng có thể di chuyển qua danh sách các lựa chọn hiện có rồi chọn một lựa chọn.
Đối với một số trường hợp sử dụng, chẳng hạn như chọn một dãy số, <input> thuộc loại range có thể là lựa chọn phù hợp.
Bạn có cần cung cấp khả năng chọn nhiều tùy chọn không?
Sử dụng một phần tử <select> có thuộc tính multiple hoặc nhiều phần tử <input> thuộc loại checkbox.
Bạn cũng có thể sử dụng <input> kết hợp với phần tử <datalist>.
Thao tác này giúp bạn kết hợp một trường văn bản và danh sách các phần tử <option>.
Đảm bảo người dùng có thể điền nhiều loại dữ liệu
Có nhiều loại dữ liệu đầu vào hơn cho các trường hợp sử dụng cụ thể.
Có một <input> thuộc loại color để cung cấp cho người dùng công cụ chọn màu trong các trình duyệt được hỗ trợ, ngoài ra còn có nhiều loại khác. Để đảm bảo người dùng có thể nhập mật khẩu của họ, hãy sử dụng <input> cùng với type="password". Mọi ký tự đã nhập được che bằng dấu hoa thị ("*") hoặc dấu chấm ("•") để đảm bảo mật khẩu không đọc được.
Bạn có muốn đưa một mã thông báo bảo mật duy nhất vào dữ liệu biểu mẫu không?
Sử dụng <input> bằng tài khoản type="hidden".
Người dùng không thể xem hoặc sửa đổi giá trị của <input> thuộc loại hidden.
Để cho phép người dùng tải tệp lên và gửi tệp, hãy sử dụng <input> cùng với type="file".
Bạn cũng có thể xác định phần tử tuỳ chỉnh nếu có trường hợp sử dụng đặc biệt, trong đó không có phần tử hoặc loại tích hợp nào phù hợp.
Giúp người dùng điền vào biểu mẫu của bạn
Có nhiều loại và thành phần biểu mẫu, nhưng bạn nên chọn loại và thành phần nào?
Đối với một số trường hợp sử dụng, việc chọn phần tử và loại phù hợp rất đơn giản, chẳng hạn như <input type="date">. Còn với những người khác thì tuỳ thuộc vào tình hình.
Ví dụ: bạn có thể sử dụng nhiều phần tử <input> với một phần tử type="checkbox" hoặc <select>.
Tìm hiểu thêm về cách chọn giữa hộp danh sách và danh sách thả xuống.
Nhìn chung, hãy nhớ kiểm thử biểu mẫu với người dùng thực tế để tìm ra loại và thành phần biểu mẫu phù hợp nhất.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về các trường trong biểu mẫu
Tôi có thể tải nhiều tệp lên bằng chế độ điều khiển biểu mẫu không?
<input type="files">.<input type="file" multiple>.<input type="multiple-files">.Có gì khác biệt giữa gói type="text" và gói type="password"?
type="password".type="password", mọi ký tự đã nhập sẽ bị che khuất bằng dấu hoa thị (*) hoặc dấu chấm (•).type="password".