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