Tôi có thể sử dụng các trường biểu mẫu nào?
Để cung cấp 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
Để cung cấp cho người dùng một trường biểu mẫu để chèn văn bản, hãy 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 dùng phần tử <textarea>.
Thao tác này cho phép có 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ì phần tử có thể cuộn và thay đổi kích thước đượ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 có bàn phím ảo được điều chỉnh,
đảm bảo họ có thể nhập số điện thoại nhanh hơn 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, một bàn phím ảo được điều chỉnh sẽ xuất hiện.
Dùng thuộc tính required để trường biểu mẫu trở thành trường 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 thông tin đầu vào có giá trị và là hợp lệ: trong trường hợp này,
rằng đó là một đị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. Các giải pháp 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
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 sử dụng type="date".
Một số trình duyệt hiển thị định dạng này dưới dạng phần giữ chỗ, chẳng hạn như yyyy-mm-dd,
minh hoạ cách nhập ngày.
Mọi 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ủa bạn, có nhiều phương án thay thế.
Trước tiên, hãy xem xét các giải pháp khả thi nếu người dùng chỉ có thể chọn một tuỳ chọn duy nhất.
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 nhìn 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 cách khác là sử dụng phần tử <select>.
Người dùng có thể xem qua danh sách các lựa chọn có sẵn 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 cho phép chọn nhiều mục không?
Sử dụng 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 cung cấp cho bạn sự kết hợp giữa 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 công cụ chọn màu trong các trình duyệt được hỗ trợ,
và còn nhiều loại khác nữa. Để đả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ự bạn nhập đều bị dấu hoa thị ("*") hoặc dấu chấm ("•") che khuất
để đảm bảo mật khẩu không đọc được.
Bạn có muốn đưa 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> với 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, khi không có phần tử hoặc kiểu tích hợp nào phù hợp.
Giúp người dùng điền vào biểu mẫu
Có nhiều loại và thành phần 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 các nhà cung cấp khác, điều này còn tuỳ thuộc.
Ví dụ: bạn có thể sử dụng nhiều phần tử <input> có phần tử type="checkbox" hoặc <select>.
Tìm hiểu thêm về việc chọn giữa các hộp danh sách và danh sách thả xuống.
Nhìn chung, hãy đảm bảo thử nghiệm biểu mẫu với người dùng thực để tìm loại và yếu tố biểu mẫu tốt 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 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 gói type="text" và gói type="password"?
type="password".type="password", mọi ký tự bạn nhập sẽ bị dấu hoa thị (*) hoặc dấu chấm (•) che khuất.type="password".