Sử dụng các tính năng của trình duyệt đa nền tảng để xây dựng biểu mẫu đăng nhập an toàn, dễ tiếp cận và dễ sử dụng.
Nếu người dùng cần đăng nhập vào trang web của bạn, thì việc thiết kế biểu mẫu đăng nhập 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 nhập được thiết kế kém sẽ có tỷ lệ thoát cao. Mỗi lần người dùng rời đi có thể đồng nghĩa với việc bạn 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 nhập.
Cách triển khai
Dưới đây là những nguyên tắc quan trọng nhất để xây dựng biểu mẫu đăng nhập hiệu quả.
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ụ: sử dụng Đăng nhập 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 nhập
Đối với mỗi bước đăng nhập, hãy sử dụng tiêu đề trang và giá trị nút mang tính mô tả để làm 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 nhập
Hãy nhớ thêm các giá trị autocomplete thích hợp vào biểu mẫu đăng nhập.
Đ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 nhập 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ể sẽ lưu thông tin đăng nhập vào một bản ghi vật lý hoặc lưu trữ dữ liệu đăng nhập 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. 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 tính năng đăng nhập vào 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 xây dựng tính năng đăng nhập 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 nhập
Nếu bạn không cẩn thận, bàn phím di động có thể che khuất biểu mẫu của bạn hoặc tệ hơn là che khuất một phần nút Đăng nhập. 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 nhập ở đầu trang đăng nhập. Đặ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="current-password" cho mật khẩu hiện có
BẮT BUỘC: Sử dụng autocomplete="current-password" cho mục nhập mật khẩu trong biểu mẫu đăng nhập. Thao tác này cho trình duyệt biết rằng bạn muốn trình duyệt sử dụng mật khẩu hiện tại mà trình duyệt đã lưu trữ cho trang web.
Đối với biểu mẫu đăng nhập:
<input type="password" autocomplete="current-password" id="current-password" …>
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
BẮT BUỘC: 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.
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
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.
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 nhập 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.