Sử dụng các tính năng của trình duyệt nhiều nền tảng để xây dựng biểu mẫu đăng ký an toàn, hỗ trợ tiếp cận và dễ sử dụng.
Nếu người dùng cần đăng ký trên trang web của bạn, thì việc thiết kế biểu mẫu đăng ký phù hợp là rất quan trọng. Điều này đặc biệt đúng với những người có kết nối kém, dùng thiết bị di động, đang vội hoặc đang căng thẳng. Biểu mẫu đăng ký được thiết kế kém sẽ có tỷ lệ thoát cao. Mỗi lần thoát có thể đồng nghĩa với việc mất đi một khách hàng và khiến người dùng không hài lòng, chứ không chỉ là bỏ lỡ cơ hội đăng ký.
Cách triển khai
Dưới đây là những nguyên tắc quan trọng nhất để tạo biểu mẫu đăng ký thành công.
Sử dụng HTML hợp lệ và có ý nghĩa
Khai thác tối đa các phần tử và thuộc tính được tạo để tạo biểu mẫu:
<form>,<input>,<label>và<button>type,autocompletevàinputmode
Các phần tử này cho phép chức năng tích hợp sẵn của trình duyệt, cải thiện khả năng hỗ trợ tiếp cận và thêm ý nghĩa cho mã đánh dấu.
Sử dụng phần tử <label> để gắn nhãn các trường biểu mẫu cho mục nhập dữ liệu
Để gắn nhãn cho <input>, <select> hoặc <textarea>, hãy sử dụng <label>. Liên kết nhãn với dữ liệu đầu vào bằng cách gán cho thuộc tính for của nhãn cùng giá trị với id của dữ liệu đầu vào.
Khai thác tối đa các thuộc tính HTML
Giúp người dùng dễ dàng nhập dữ liệu bằng cách sử dụng thuộc tính <type> của phần tử <input> thích hợp để cung cấp bàn phím phù hợp trên thiết bị di động và bật tính năng xác thực cơ bản tích hợp sẵn của trình duyệt.
Luôn sử dụng type="email" cho địa chỉ email và type="tel" cho số điện thoại.
Mỗi phần tử <input>, <select> và <textarea> NÊN có một thuộc tính autocomplete thích hợp để cải thiện khả năng hỗ trợ tiếp cận và giúp người dùng tránh phải nhập lại dữ liệu.
Thông tin đầu vào về tên người dùng và email chứa giá trị nhận dạng, không phải văn bản. Thêm spellcheck="false" để trình duyệt không viết lại thành một giá trị mà tài khoản không khớp. autocorrect và autocapitalize luôn bị tắt đối với input type="email", nhưng bắt buộc đối với tên người dùng không phải email.
Tạo nút hữu ích
Sử dụng <button> cho các nút. Bạn cũng có thể sử dụng <input type="submit">, nhưng không được sử dụng div hoặc một số phần tử ngẫu nhiên khác làm nút. Các phần tử nút cung cấp hành vi dễ tiếp cận, chức năng gửi biểu mẫu tích hợp sẵn và có thể dễ dàng tạo kiểu.
Đặt cho mỗi nút gửi biểu mẫu một giá trị cho biết chức năng của nút đó. Sử dụng nhãn rõ ràng, dễ nhận biết. Ví dụ: Hãy sử dụng Tạo tài khoản hoặc Đăng ký thay vì Tiếp tục hoặc Gửi.
Sử dụng một trường nhập tên duy nhất nếu có thể
Cho phép người dùng nhập tên của họ bằng một mục nhập duy nhất, trừ phi bạn có lý do chính đáng để lưu trữ riêng tên, họ, danh xưng hoặc các phần tên khác. Việc sử dụng một trường nhập tên duy nhất giúp biểu mẫu bớt phức tạp hơn, cho phép cắt và dán, đồng thời giúp tính năng tự động điền trở nên đơn giản hơn.
Cho phép tên quốc tế. Để xác thực, hãy tránh sử dụng biểu thức chính quy chỉ khớp với các ký tự Latinh. Chỉ dùng chữ cái Latinh: loại trừ những người dùng có tên hoặc địa chỉ chứa các ký tự không thuộc bảng chữ cái Latinh. Thay vào đó, hãy cho phép so khớp chữ cái Unicode và đảm bảo phần phụ trợ của bạn hỗ trợ Unicode một cách an toàn cho cả dữ liệu đầu vào và đầu ra. Unicode trong biểu thức chính quy được các trình duyệt hiện đại hỗ trợ tốt.
Hiện tiến trình đăng ký
Đối với mỗi bước đăng ký, hãy sử dụng tiêu đề trang và giá trị nút mang tính mô tả để nêu rõ những việc cần làm ngay và bước tiếp theo là gì.
Sử dụng thuộc tính enterkeyhint trên dữ liệu đầu vào của biểu mẫu để đặt nhãn phím Enter trên bàn phím di động. Ví dụ: sử dụng enterkeyhint="previous" và enterkeyhint="next" trong biểu mẫu nhiều trang, enterkeyhint="done" cho dữ liệu đầu vào cuối cùng trong biểu mẫu và enterkeyhint="search" cho dữ liệu đầu vào tìm kiếm.
Giúp người dùng tránh phải nhập lại dữ liệu đăng ký
Hãy nhớ thêm các giá trị autocomplete thích hợp vào biểu mẫu đăng ký.
Điều này cho phép trình duyệt giúp người dùng bằng cách lưu trữ thông tin đăng ký một cách an toàn và nhập chính xác dữ liệu biểu mẫu. Nếu không có tính năng tự động điền, người dùng có thể có xu hướng lưu giữ thông tin đăng ký bằng giấy tờ hoặc lưu trữ dữ liệu đăng ký không an toàn trên thiết bị của họ.
Xác thực cẩn thận
Xác thực dữ liệu đầu vào theo thời gian thực và trước khi gửi biểu mẫu. Sử dụng type="email" cho dữ liệu đầu vào email – trình duyệt sẽ tự động xác thực định dạng. Đối với mật khẩu, hãy sử dụng thuộc tính pattern để thực thi các yêu cầu về độ mạnh và cung cấp thông báo lỗi rõ ràng khi không xác thực được. Thêm thuộc tính required vào các trường bắt buộc để ngăn việc gửi biểu mẫu trống.
Đặt nút đăng ký trong phần tử <form> riêng
Luôn sử dụng phần tử <form> khi bạn yêu cầu người dùng nhập dữ liệu
Đừng gói dữ liệu đầu vào trong <div> và chỉ xử lý việc gửi dữ liệu đầu vào bằng JavaScript. Nhìn chung, bạn nên sử dụng phần tử <form>. Điều này giúp trình đọc màn hình và các thiết bị hỗ trợ khác có thể truy cập vào trang web của bạn, hỗ trợ một loạt tính năng tích hợp sẵn của trình duyệt, giúp việc tạo biểu mẫu đăng ký cơ bản cho các trình duyệt cũ trở nên đơn giản hơn và vẫn có thể hoạt động ngay cả khi JavaScript không hoạt động.
Không nhập dữ liệu trùng lặp
Một số trang web buộc người dùng phải nhập email hoặc mật khẩu hai lần. Điều này có thể giúp giảm lỗi cho một số ít người dùng, nhưng lại khiến tất cả người dùng phải làm thêm việc và làm tăng tỷ lệ bỏ ngang. Việc yêu cầu nhập hai lần cũng không có ý nghĩa gì khi trình duyệt tự động điền địa chỉ email hoặc đề xuất mật khẩu mạnh. Tốt hơn là bạn nên cho phép người dùng xác nhận địa chỉ email của họ (dù sao thì bạn cũng cần làm việc đó) và giúp họ dễ dàng đặt lại mật khẩu nếu cần.
Giữ mật khẩu ở chế độ riêng tư nhưng cho phép người dùng xem mật khẩu nếu họ muốn
Các trường nhập mật khẩu phải có type="password" để ẩn văn bản mật khẩu và giúp trình duyệt hiểu rằng trường nhập này là dành cho mật khẩu. (Xin lưu ý rằng các trình duyệt sử dụng nhiều kỹ thuật để hiểu vai trò của dữ liệu đầu vào và quyết định có đề xuất lưu mật khẩu hay không.)
Bạn nên thêm nút bật/tắt Hiện mật khẩu để cho phép người dùng kiểm tra văn bản họ đã nhập và đừng quên thêm đường liên kết Quên mật khẩu.
Cung cấp bàn phím phù hợp cho người dùng thiết bị di động
Sử dụng <input type="email"> để cung cấp cho người dùng thiết bị di động bàn phím phù hợp và bật tính năng xác thực địa chỉ email cơ bản được tích hợp sẵn trong trình duyệt… mà không cần JavaScript!
Nếu bạn cần sử dụng số điện thoại thay vì địa chỉ email, thì <input type="tel"> sẽ bật bàn phím điện thoại trên thiết bị di động. Bạn cũng có thể sử dụng thuộc tính inputmode khi cần: inputmode="numeric" là lựa chọn lý tưởng cho mã PIN.
Ngăn bàn phím di động che khuất nút Đăng ký
Nếu bạn không cẩn thận, bàn phím di động có thể che mất biểu mẫu hoặc tệ hơn là che khuất một phần nút Đăng ký. Người dùng có thể bỏ cuộc trước khi nhận ra điều gì đã xảy ra.
Nếu có thể, hãy tránh điều này bằng cách chỉ hiển thị thông tin nhập email (hoặc điện thoại) và mật khẩu cũng như nút Đăng ký ở đầu trang đăng ký. Đặt nội dung khác bên dưới.
Giúp người dùng tránh phải nhập lại dữ liệu
Bạn có thể giúp trình duyệt lưu trữ dữ liệu chính xác và tự động điền thông tin đầu vào để người dùng không phải nhớ nhập giá trị email và mật khẩu. Điều này đặc biệt quan trọng trên thiết bị di động và rất quan trọng đối với thông tin nhập email, vốn có tỷ lệ bỏ ngang cao. Có hai phần trong vấn đề này:
- Các thuộc tính
autocomplete,name,idvàtypegiúp trình duyệt hiểu được vai trò của dữ liệu đầu vào để lưu trữ dữ liệu mà sau này có thể dùng cho tính năng tự động điền. Để cho phép lưu trữ dữ liệu cho tính năng tự động điền, các trình duyệt hiện đại cũng yêu cầu dữ liệu đầu vào phải có giá trịnamehoặcidổn định (không được tạo ngẫu nhiên trên mỗi lượt tải trang hoặc triển khai trang web) và phải nằm trong phần tử<form>có nútsubmit. - Thuộc tính
autocompletegiúp trình duyệt tự động điền chính xác thông tin đầu vào bằng dữ liệu được lưu trữ.
Đối với dữ liệu đầu vào là email, hãy sử dụng autocomplete="username" vì username được trình quản lý mật khẩu nhận dạng trong các trình duyệt hiện đại, mặc dù bạn nên sử dụng type="email" và có thể muốn sử dụng id="email" và name="email". Đối với dữ liệu đầu vào là mật khẩu, hãy sử dụng giá trị autocomplete thích hợp để giúp trình duyệt phân biệt giữa mật khẩu mới và mật khẩu hiện tại.
Sử dụng autocomplete="new-password" cho mật khẩu mới
BẮT BUỘC: Đối với biểu mẫu đăng ký, hãy sử dụng autocomplete="new-password".
<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>
Cho phép trình duyệt đề xuất mật khẩu mạnh
Các trình duyệt hiện đại sử dụng phương pháp phỏng đoán để quyết định thời điểm hiển thị giao diện người dùng của trình quản lý mật khẩu và đề xuất mật khẩu mạnh.
Trình tạo mật khẩu tích hợp sẵn trong trình duyệt giúp người dùng và nhà phát triển không cần phải tìm hiểu xem "mật khẩu mạnh" là gì. Vì trình duyệt có thể lưu trữ mật khẩu một cách an toàn và tự động điền mật khẩu khi cần, nên người dùng không cần phải nhớ hoặc nhập mật khẩu. Việc khuyến khích người dùng tận dụng trình tạo mật khẩu tích hợp sẵn trong trình duyệt cũng có nghĩa là họ có nhiều khả năng sử dụng mật khẩu mạnh và duy nhất trên trang web của bạn, đồng thời ít có khả năng sử dụng lại mật khẩu có thể bị xâm phạm ở nơi khác.
Giúp người dùng tránh vô tình bỏ lỡ dữ liệu đầu vào
Thêm thuộc tính required vào cả trường email và mật khẩu. Các trình duyệt hiện đại sẽ tự động nhắc và đặt tiêu điểm cho dữ liệu bị thiếu.
Cho phép dán mật khẩu
Một số trang web không cho phép dán văn bản vào ô nhập mật khẩu.
Việc không cho phép dán mật khẩu sẽ gây phiền toái cho người dùng, khuyến khích họ dùng mật khẩu dễ nhớ (và do đó có thể dễ bị xâm phạm hơn) và theo các tổ chức như Trung tâm An ninh mạng Quốc gia của Vương quốc Anh, việc này thực sự có thể làm giảm tính bảo mật. Người dùng chỉ biết rằng họ không được phép dán sau khi cố gắng dán mật khẩu, vì vậy, việc không cho phép dán mật khẩu không giúp tránh được các lỗ hổng bảo mật của bảng nhớ tạm.
Cung cấp tính năng đăng nhập qua bên thứ ba
Nhiều người dùng thích đăng nhập vào các trang web bằng biểu mẫu đăng ký địa chỉ email và mật khẩu. Tuy nhiên, bạn cũng nên cho phép người dùng đăng nhập bằng nhà cung cấp danh tính bên thứ ba, còn gọi là đăng nhập liên kết.
Phương pháp này có một số ưu điểm. Đối với những người dùng tạo tài khoản bằng thông tin đăng nhập liên kết, bạn không cần yêu cầu, thông báo hoặc lưu trữ mật khẩu.
Bạn cũng có thể truy cập vào thông tin hồ sơ đã xác minh khác từ thông tin đăng nhập liên kết, chẳng hạn như địa chỉ email. Điều này có nghĩa là người dùng không cần nhập dữ liệu đó và bạn không cần tự xác minh. Tính năng đăng nhập liên kết cũng có thể giúp người dùng dễ dàng hơn nhiều khi họ có thiết bị mới.
Cẩn thận với tên người dùng
Đừng yêu cầu tên người dùng trừ phi (hoặc cho đến khi) bạn cần. Cho phép người dùng đăng ký và đăng nhập chỉ bằng địa chỉ email (hoặc số điện thoại) và mật khẩu, hoặc đăng nhập liên kết nếu họ muốn. Đừng buộc họ phải chọn và nhớ tên người dùng.
Nếu trang web của bạn yêu cầu tên người dùng, đừng áp đặt các quy tắc không hợp lý đối với tên người dùng và đừng ngăn người dùng cập nhật tên người dùng của họ. Trên phần phụ trợ, bạn nên tạo một mã nhận dạng duy nhất cho mỗi tài khoản người dùng, chứ không phải giá trị nhận dạng dựa trên dữ liệu cá nhân như tên người dùng.
Ngoài ra, hãy nhớ sử dụng autocomplete="username" cho tên người dùng.
Chiến lược dự phòng
Tính năng tự động điền là một tính năng cải tiến tăng dần. Trong các trình duyệt không hỗ trợ tính năng tự động điền, người dùng chỉ cần nhập thông tin đăng ký theo cách thủ công. Các quy tắc ràng buộc HTML có ngữ nghĩa (chẳng hạn như type, inputmode và required) vẫn sẽ hoạt động đúng cách để xác thực dữ liệu đầu vào của người dùng và cung cấp bàn phím ảo chính xác.