Tôi có thể sử dụng những 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 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 các 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 dễ dàng xem văn bản họ đã nhập, vì phần tử này có thể cuộn và đổi kích thước.
Đảm bảo người dùng nhập dữ liệu theo đúng định dạng
Bạn muốn giúp người dùng điền số điện thoại?
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, đả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 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à 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 lớp này cũng cung cấp các 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 dưới dạng phần giữ chỗ 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ạ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 tuỳ chọn có thể chọn, 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, bạn có thể sử dụng nhiều phương án thay thế.
Trước tiên, hãy xem các giải pháp có thể áp dụng 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 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 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 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ải 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 tuỳ chọn 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 sẽ cung cấp cho bạn một tổ hợp gồm 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ợ, 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ự được nhập đều bị che khuất bằng dấu hoa thị ("*") hoặc dấu chấm ("•") để đảm bảo không thể đọc được mật khẩu.
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 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ó 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ó nhiều loại và phần tử 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 thích 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í dụ: bạn có thể sử dụng nhiều phần tử <input>
với 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.
Nhìn chung, hãy nhớ kiểm thử biểu mẫu của bạn với người dùng thực để tìm loại và thành phần biểu mẫu phù hợp nhất.
Kiểm tra mức độ hiểu biết
Kiểm tra kiến thức của bạn về các trường biểu mẫu
Có thể tải nhiều tệp lên bằng một thành phần điều khiển biểu mẫu không?
<input type="files">
.<input type="file" multiple>
.<input type="multiple-files">
.Sự khác biệt giữa type="text"
và type="password"
là gì?
type="password"
.type="password"
, mọi ký tự được nhập sẽ bị dấu hoa thị (*
) hoặc dấu chấm (•
) che khuất.type="password"
.