Video: Học Responsive Design bài 6: Breakpoint và Mobile First 2025
Thiết kế các mẫu hữu ích trong HTML là một cam kết khác với việc thiết kế sử dụng mẫu . Biểu mẫu của bạn có thể thu thập dữ liệu mà bạn cần, nhưng nếu biểu mẫu của bạn khó sử dụng, họ có thể từ bỏ nó trước khi chúng hoàn tất.
Khi bạn sử dụng các phần tử đánh dấu và các yếu tố khác dẫn đến bố cục trang, hãy nhớ các nguyên tắc sau:
-
Cung cấp các đầu mối về văn bản cho tất cả các biểu mẫu của bạn. Hãy rõ ràng về thông tin bạn muốn và định dạng bạn cần.
Ví dụ: cho người dùng biết chi tiết như liệu
-
Ngày phải được nhập là mm / dd / yy (so với mm / dd / yyyy).
-
Số ký tự mà một trường có thể mất là có hạn.
Bạn có thể giới hạn ký tự bằng cách sử dụng thuộc tính maxlength.
-
-
Sử dụng các trường chiều rộng và giới hạn ký tự để cung cấp các đầu mối trực quan. Ví dụ: nếu người dùng nhập số thẻ tín dụng là xxx x -xxx x -xxxx -xxxx , xem xét tạo ra bốn trường văn bản - một cho mỗi một phần của số.
-
Nhóm các lĩnh vực tương tự. Một nhóm hợp lý các trường làm cho việc điền vào biểu mẫu trở nên dễ dàng hơn. Thật khó hiểu nếu bạn hỏi tên người truy cập, sau đó sinh nhật, và sau đó là họ.
-
Chia các mẫu dài thành các phần dễ quản lý. Các dạng khối ngắn ít gây hăm dọa và có nhiều khả năng hoàn thành.
Các nhà bán lẻ trực tuyến lớn (như Amazon.com) sử dụng phương pháp này để có được chi tiết mà họ cần cho đơn đặt hàng mà không làm quá trình này quá đau đớn.
-
Đánh dấu các trường bắt buộc. Nếu một số phần trong mẫu của bạn không thể để trống khi người dùng gửi biểu mẫu, đánh dấu các trường đó rõ ràng.
Bạn có thể xác định các trường được yêu cầu bởi
-
Làm cho chúng đậm
-
Sử dụng một màu khác
-
Đặt một dấu sao bên cạnh
-
-
Viết các thông báo lỗi hữu ích, hữu ích. Đảm bảo thông tin phản hồi về xác nhận mẫu của bạn có ý nghĩa đối với khách truy cập trang web (kiểm tra lại với nhóm kiểm tra chỉ để đảm bảo). Không có gì khiến du khách trở nên như một thông điệp khó hiểu, vô ích. ("Lỗi loại 42" có thể có ý nghĩa gì đó đối với một lập trình, nhưng không phải với bất kỳ ai khác).
-
Cho người dùng biết loại thông tin nào họ cần cho biểu mẫu. Nếu người dùng cần bất kỳ thông tin nào trong tay họ trước khi điền vào biểu mẫu của bạn, trang Hình thức cổng có thể chi tiết mọi thứ người dùng nên có trước khi bắt đầu điền vào biểu mẫu.
Hàng loạt các hình thức mà RateGenius sử dụng để thu thập thông tin cho vay ô tô và tái cấp vốn vay là những ví dụ tuyệt vời của các mẫu dài thu thập nhiều loại dữ liệu khác nhau bằng cách sử dụng tất cả các yếu tố đánh dấu mẫu sẵn có.
