Các phương pháp hay nhất về biểu mẫu đăng nhập

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.

Sam Dutton

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, trên 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 thoát có thể đồng nghĩa với việc mất đi một người dùng và khiến họ không hài lòng, chứ không chỉ là bỏ lỡ cơ hội đăng nhập.

Dưới đây là ví dụ về một biểu mẫu đăng nhập đơn giản minh hoạ tất cả các phương pháp hay nhất:

Danh sách kiểm tra

• Sử dụng các phần tử HTML có ý nghĩa: <form>, <input>, <label> và <button>.
• Gắn nhãn cho từng dữ liệu đầu vào bằng <label>.
• Sử dụng các thuộc tính phần tử để truy cập vào các tính năng tích hợp sẵn của trình duyệt: type, name, autocomplete, required.
• Cung cấp cho các thuộc tính name và id của dữ liệu đầu vào các giá trị ổn định, không thay đổi giữa các lần tải trang hoặc triển khai trang web.
• Đặt thông tin đăng nhập vào phần tử <form> riêng.
• Đảm bảo gửi biểu mẫu thành công.
• Sử dụng autocomplete="new-password" và id="new-password" cho thông tin nhập mật khẩu trong biểu mẫu đăng ký và cho mật khẩu mới trong biểu mẫu đặt lại mật khẩu.
• Sử dụng autocomplete="current-password" và id="current-password" cho dữ liệu đầu vào của mật khẩu đăng nhập.
• Cung cấp chức năng Hiện mật khẩu.
• Sử dụng aria-label và aria-describedby cho thông tin nhập mật khẩu.
• Đừng nhập thông tin trùng lặp.
• Thiết kế biểu mẫu sao cho bàn phím di động không che khuất các dữ liệu đầu vào hoặc nút.
• Đảm bảo biểu mẫu có thể sử dụng được trên thiết bị di động: sử dụng văn bản dễ đọc và đảm bảo các dữ liệu đầu vào và nút đủ lớn để làm đích chạm.
• Duy trì thương hiệu và phong cách trên trang đăng ký và đăng nhập.
• Kiểm thử trong thực tế cũng như trong phòng thí nghiệm: xây dựng số liệu phân tích trang, số liệu phân tích hoạt động tương tác và đo lường hiệu suất lấy người dùng làm trung tâm vào quy trình đăng ký và đăng nhập.
• Kiểm thử trên nhiều trình duyệt và thiết bị: hành vi của biểu mẫu có sự khác biệt đáng kể giữa các nền tảng.

Sử dụng HTML có ý nghĩa

Sử dụng các phần tử được tạo cho công việc: <form>, <label> và <button>. 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 đánh dấu.

Sử dụng <form>

Bạn có thể muốn gói dữ liệu đầu vào trong một <div> và xử lý việc gửi dữ liệu đầu vào hoàn toàn bằng JavaScript. Nhìn chung, bạn nên sử dụng phần tử <form> cũ đơn giản. Đ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.

Sử dụng <label>

Để gắn nhãn cho một dữ liệu đầu vào, hãy sử dụng <label>!

<label for="email">Email</label>
<input id="email" …>

Có hai lý do:

• Thao tác nhấn hoặc nhấp vào nhãn sẽ di chuyển tiêu điểm đến dữ liệu đầu vào của nhãn đó. Liên kết nhãn với một thông tin đầu vào bằng cách sử dụng thuộc tính for của nhãn với name hoặc id của thông tin đầu vào.
• Trình đọc màn hình sẽ đọc văn bản nhãn khi nhãn hoặc dữ liệu đầu vào của nhãn được lấy tiêu điểm.

Đừng sử dụng phần giữ chỗ làm nhãn nhập dữ liệu. Người dùng có thể quên mục đích của thông tin nhập vào sau khi họ bắt đầu nhập văn bản, đặc biệt là nếu họ bị phân tâm ("Tôi đang nhập địa chỉ email, số điện thoại hay mã tài khoản?"). Có rất nhiều vấn đề tiềm ẩn khác với phần giữ chỗ: hãy xem bài viết Don't Use The Placeholder Attribute (Đừng sử dụng thuộc tính phần giữ chỗ) và Placeholders in Form Fields Are Harmful (Phần giữ chỗ trong trường biểu mẫu có hại) nếu bạn chưa tin.

Tốt nhất là bạn nên đặt nhãn phía trên dữ liệu đầu vào. Điều này giúp thiết kế nhất quán trên thiết bị di động và máy tính, đồng thời theo nghiên cứu về AI của Google, điều này giúp người dùng quét nhanh hơn. Bạn sẽ có nhãn và dữ liệu đầu vào có chiều rộng đầy đủ, đồng thời không cần điều chỉnh chiều rộng của nhãn và dữ liệu đầu vào cho vừa với văn bản nhãn.

Hãy mở bản minh hoạ label-position trên thiết bị di động để tự mình xem.

Sử dụng <button>

Sử dụng <button> cho các nút! Các phần tử nút cung cấp hành vi dễ tiếp cận và chức năng gửi biểu mẫu tích hợp sẵn, đồng thời có thể dễ dàng tạo kiểu. Không có lý do gì để sử dụng <div> hoặc một số phần tử khác giả vờ là nút.

Đảm bảo rằng nút gửi cho biết chức năng của nút. Ví dụ: Tạo tài khoản hoặc Đăng nhập, chứ không phải Gửi hoặc Bắt đầu.

Đảm bảo gửi biểu mẫu thành công

Giúp trình quản lý mật khẩu hiểu rằng biểu mẫu đã được gửi. Có hai cách để thực hiện việc này:

• Chuyển đến một trang khác.
• Mô phỏng thao tác điều hướng bằng History.pushState() hoặc History.replaceState(), rồi xoá biểu mẫu mật khẩu.

Với yêu cầu XMLHttpRequest hoặc fetch, hãy đảm bảo rằng trạng thái đăng nhập thành công được báo cáo trong phản hồi và được xử lý bằng cách đưa biểu mẫu ra khỏi DOM cũng như cho người dùng biết rằng họ đã đăng nhập thành công.

Cân nhắc việc tắt nút Đăng nhập sau khi người dùng nhấn hoặc nhấp vào nút đó. Nhiều người dùng nhấp vào nút nhiều lần ngay cả trên những trang web nhanh và thích ứng. Điều này làm chậm các lượt tương tác và tăng tải cho máy chủ.

Ngược lại, đừng tắt tính năng gửi biểu mẫu trong khi chờ người dùng nhập dữ liệu. Ví dụ: đừng tắt nút Đăng nhập nếu người dùng chưa nhập mã PIN khách hàng. Người dùng có thể bỏ sót thông tin nào đó trong biểu mẫu, sau đó thử nhấn liên tục vào nút Đăng nhập (đã bị vô hiệu hoá) và nghĩ rằng nút này không hoạt động. Ít nhất, nếu bạn phải tắt tính năng gửi biểu mẫu, hãy giải thích cho người dùng biết những thông tin còn thiếu khi họ nhấp vào nút bị tắt.

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ể làm 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 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.

Khai thác tối đa các thuộc tính của phần tử

Đây mới là lúc điều kỳ diệu thực sự xảy ra! Trình duyệt có nhiều tính năng tích hợp hữu ích sử dụng các thuộc tính của phần tử nhập.

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

Thông tin 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 thông tin nhập là mật khẩu. (Xin lưu ý rằng 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 xem có đề xuất lưu mật khẩu hay không.)

Bạn nên thêm nút bật/tắt Show password (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 Forgot password (Quên mật khẩu). Xem phần Bật tính năng hiển thị 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 một 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. Mọi điều bạn muốn biết về inputmode đều có thêm thông tin chi tiết.

Ngăn bàn phím di động che khuất nút Đăng nhập

Rất tiếc, 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 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.

Kiểm thử trên nhiều loại thiết bị

Bạn cần thử nghiệm trên nhiều thiết bị cho đối tượng mục tiêu và điều chỉnh cho phù hợp. BrowserStack cho phép thử nghiệm miễn phí cho các dự án nguồn mở trên nhiều thiết bị và trình duyệt thực.

Cân nhắc việc sử dụng hai trang

Một số trang web (bao gồm cả Amazon và eBay) tránh được vấn đề này bằng cách yêu cầu email (hoặc điện thoại) và mật khẩu trên hai trang. Phương pháp này cũng giúp đơn giản hoá trải nghiệm: người dùng chỉ được giao một việc tại một thời điểm.

Tốt nhất là bạn nên triển khai việc này bằng một <form> duy nhất. Sử dụng JavaScript để ban đầu chỉ hiển thị thông tin nhập email, sau đó ẩn thông tin đó và hiển thị thông tin nhập mật khẩu. Nếu bạn phải buộc người dùng chuyển đến một trang mới giữa bước nhập email và mật khẩu, thì biểu mẫu trên trang thứ hai phải có một phần tử nhập ẩn chứa giá trị email để giúp trình quản lý mật khẩu lưu trữ giá trị chính xác. Kiểu biểu mẫu mật khẩu mà Chromium hiểu cung cấp một ví dụ về mã.

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:

1. Các thuộc tính autocomplete, name, id và type giú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ị name hoặc id ổn định (không được tạo ngẫu nhiên mỗi khi tải trang hoặc triển khai trang web) và phải nằm trong <form> có nút submit.

2. Thuộc tính autocomplete giúp trình duyệt tự động điền chính xác thông tin đầu vào bằng cách sử dụng dữ liệu được lưu trữ.

Đối với dữ liệu đầu vào 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, ngay cả khi 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 mật khẩu, hãy sử dụng các giá trị autocomplete và id 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" và id="new-password" để tạo mật khẩu mới

• Sử dụng autocomplete="new-password" và id="new-password" cho thông tin nhập mật khẩu trong biểu mẫu đăng ký hoặc mật khẩu mới trong biểu mẫu thay đổi mật khẩu.

Sử dụng autocomplete="current-password" và id="current-password" cho mật khẩu hiện có

• Sử dụng autocomplete="current-password" và id="current-password" cho dữ liệu đầu vào mật khẩu trong biểu mẫu đăng nhập hoặc dữ liệu đầu vào cho mật khẩu cũ của người dùng trong biểu mẫu thay đổi mật khẩu. Điều 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 ký:

<input type="password" autocomplete="new-password" id="new-password" …>

Để đăng nhập:

<input type="password" autocomplete="current-password" id="current-password" …>

Hỗ trợ trình quản lý mật khẩu

Mỗi trình duyệt xử lý tính năng tự động điền email và đề xuất mật khẩu theo cách khác nhau, nhưng kết quả thì gần như giống nhau. Ví dụ: trên Safari 11 trở lên trên máy tính, trình quản lý mật khẩu sẽ xuất hiện, sau đó phương thức xác thực bằng sinh trắc học (nhận dạng khuôn mặt hoặc vân tay) sẽ được sử dụng nếu có.

Chrome trên máy tính hiển thị các đề xuất về email, trình quản lý mật khẩu và tự động điền mật khẩu.

Hệ thống mật khẩu và tự động điền của trình duyệt không hề đơn giản. Các thuật toán để đoán, lưu trữ và hiển thị giá trị không được chuẩn hoá và khác nhau tuỳ theo nền tảng. Ví dụ: như Hidde de Vries đã chỉ ra: "Trình quản lý mật khẩu của Firefox bổ sung phương pháp phỏng đoán bằng hệ thống công thức".

Tự động điền: Những điều nhà phát triển web nên biết nhưng chưa biết có nhiều thông tin hơn về cách sử dụng name và autocomplete. Thông số kỹ thuật HTML liệt kê tất cả 59 giá trị có thể có.

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.

Sau đây là cách Safari thực hiện trên máy tính.

(Tính năng đề xuất mật khẩu mạnh và riêng biệt đã có trong Safari kể từ phiên bản 12.0.)

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. Không cần JavaScript!

Thiết kế cho ngón tay và ngón cái

Kích thước trình duyệt mặc định cho hầu hết mọi thứ liên quan đến các phần tử đầu vào và nút đều quá nhỏ, đặc biệt là trên thiết bị di động. Điều này có vẻ hiển nhiên, nhưng lại là một vấn đề thường gặp với biểu mẫu đăng nhập trên nhiều trang web.

Đảm bảo các trường nhập dữ liệu và nút đủ lớn

Kích thước và khoảng đệm mặc định cho dữ liệu đầu vào và nút quá nhỏ trên máy tính và thậm chí còn tệ hơn trên thiết bị di động.

Theo hướng dẫn về hỗ trợ tiếp cận của Android, kích thước mục tiêu đề xuất cho các đối tượng trên màn hình cảm ứng là 7 – 10 mm. Nguyên tắc về giao diện của Apple đề xuất kích thước 48 x 48 px và W3C đề xuất ít nhất 44 x 44 pixel CSS. Trên cơ sở đó, hãy thêm (ít nhất) khoảng 15 px khoảng đệm vào các phần tử đầu vào và nút cho thiết bị di động, và khoảng 10 px trên máy tính. Hãy thử thao tác này bằng thiết bị di động thực tế và ngón tay hoặc ngón cái thực tế. Bạn có thể dễ dàng nhấn vào từng mục nhập và nút.

Tính năng kiểm tra Mục tiêu nhấn không có kích thước phù hợp của Lighthouse có thể giúp bạn tự động hoá quy trình phát hiện các phần tử đầu vào quá nhỏ.

Thiết kế cho ngón tay cái

Tìm kiếm đích chạm và bạn sẽ thấy nhiều hình ảnh về ngón trỏ. Tuy nhiên, trong thực tế, nhiều người dùng ngón tay cái để tương tác với điện thoại. Ngón cái lớn hơn ngón trỏ và khả năng điều khiển kém chính xác hơn. Đây là lý do quan trọng hơn để có các đích chạm có kích thước phù hợp.

Đặt cỡ chữ đủ lớn

Cũng như kích thước và khoảng đệm, cỡ chữ mặc định của trình duyệt cho các phần tử nhập và nút là quá nhỏ, đặc biệt là trên thiết bị di động.

Trình duyệt trên các nền tảng khác nhau sẽ có kích thước phông chữ khác nhau, vì vậy, rất khó để chỉ định một cỡ chữ cụ thể hoạt động hiệu quả ở mọi nơi. Một cuộc khảo sát nhanh về các trang web phổ biến cho thấy kích thước từ 13 đến 16 pixel trên máy tính: việc khớp với kích thước vật lý đó là mức tối thiểu phù hợp cho văn bản trên thiết bị di động.

Điều này có nghĩa là bạn cần sử dụng kích thước pixel lớn hơn trên thiết bị di động: 16px trên Chrome cho máy tính là khá dễ đọc, nhưng ngay cả khi có thị lực tốt, bạn vẫn khó đọc được văn bản 16px trên Chrome dành cho Android. Bạn có thể đặt các kích thước pixel phông chữ khác nhau cho các kích thước khung nhìn khác nhau bằng cách sử dụng truy vấn phương tiện. 20px là kích thước phù hợp trên thiết bị di động, nhưng bạn nên thử nghiệm kích thước này với bạn bè hoặc đồng nghiệp có thị lực kém.

Tính năng kiểm tra Tài liệu không sử dụng cỡ chữ dễ đọc của Lighthouse có thể giúp bạn tự động hoá quy trình phát hiện văn bản quá nhỏ.

Cung cấp đủ không gian giữa các dữ liệu đầu vào

Thêm đủ lề để các dữ liệu đầu vào hoạt động hiệu quả dưới dạng đích chạm. Nói cách khác, hãy chừa lề khoảng một ngón tay.

Đảm bảo thông tin bạn nhập hiển thị rõ ràng

Kiểu đường viền mặc định cho các trường nhập dữ liệu khiến người dùng khó nhìn thấy. Chúng gần như không hiển thị trên một số nền tảng như Chrome dành cho Android.

Cũng như khoảng đệm, hãy thêm đường viền: trên nền trắng, quy tắc chung nên áp dụng là sử dụng #ccc hoặc màu tối hơn.

Sử dụng các tính năng tích hợp sẵn của trình duyệt để cảnh báo về các giá trị đầu vào không hợp lệ

Trình duyệt có các tính năng tích hợp sẵn để xác thực biểu mẫu cơ bản cho dữ liệu đầu vào có thuộc tính type. Trình duyệt sẽ cảnh báo khi bạn gửi biểu mẫu có giá trị không hợp lệ và đặt tiêu điểm vào dữ liệu đầu vào có vấn đề.

Bạn có thể sử dụng bộ chọn CSS :invalid để làm nổi bật dữ liệu không hợp lệ. Sử dụng :not(:placeholder-shown) để tránh chọn các dữ liệu đầu vào không có nội dung.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

Hãy thử nhiều cách khác nhau để làm nổi bật dữ liệu đầu vào có giá trị không hợp lệ.

Sử dụng JavaScript khi cần thiết

Bật/tắt chế độ hiển thị mật khẩu

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. Khả năng hữu dụng sẽ bị ảnh hưởng khi người dùng không thể nhìn thấy văn bản họ đã nhập. Hiện tại, không có cách nào để thực hiện việc này, mặc dù đã có kế hoạch triển khai. Bạn sẽ cần sử dụng JavaScript.

Đoạn mã sau đây sử dụng nút văn bản để thêm chức năng Hiện mật khẩu.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Sau đây là CSS để làm cho nút trông giống như văn bản thuần tuý:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

Và JavaScript để hiển thị mật khẩu:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

Sau đây là kết quả cuối cùng:

Giúp người dùng dễ dàng nhập mật khẩu

Sử dụng aria-describedby để trình bày các quy tắc về mật khẩu bằng cách cung cấp cho thuộc tính này mã nhận dạng của phần tử mô tả các quy tắc ràng buộc. Trình đọc màn hình cung cấp văn bản nhãn, loại dữ liệu đầu vào (mật khẩu) và sau đó là nội dung mô tả.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

Khi bạn thêm chức năng Hiện mật khẩu, hãy nhớ thêm một aria-label để cảnh báo rằng mật khẩu sẽ hiển thị. Nếu không, người dùng có thể vô tình tiết lộ mật khẩu.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

Bạn có thể xem cả hai tính năng ARIA trong bản minh hoạ sau:

Bài viết Tạo biểu mẫu dễ tiếp cận có thêm các mẹo giúp biểu mẫu dễ tiếp cận hơn.

Xác thực theo thời gian thực và trước khi gửi

Các phần tử và thuộc tính biểu mẫu HTML có các tính năng tích hợp sẵn để xác thực cơ bản, nhưng bạn cũng nên sử dụng JavaScript để xác thực hiệu quả hơn trong khi người dùng nhập dữ liệu và khi họ cố gắng gửi biểu mẫu.

Bước 5 của lớp học lập trình về biểu mẫu đăng nhập sử dụng Constraint Validation API (được hỗ trợ rộng rãi) để thêm quy trình xác thực tuỳ chỉnh bằng giao diện người dùng tích hợp sẵn của trình duyệt nhằm đặt tiêu điểm và hiển thị lời nhắc.

Tìm hiểu thêm: Sử dụng JavaScript để xác thực theo thời gian thực phức tạp hơn.

Số liệu phân tích và RUM

"Bạn không thể cải thiện những gì bạn không thể đo lường" là điều đặc biệt đúng đối với biểu mẫu đăng ký và đăng nhập. Bạn cần đặt mục tiêu, đo lường mức độ thành công, cải thiện trang web và lặp lại quy trình này.

Thử nghiệm khả năng hữu dụng giảm giá có thể hữu ích khi thử nghiệm các thay đổi, nhưng bạn sẽ cần dữ liệu thực tế để thực sự hiểu cách người dùng trải nghiệm biểu mẫu đăng ký và đăng nhập:

• Số liệu phân tích về trang: số lượt xem trang đăng ký và đăng nhập, tỷ lệ thoát và số lượt thoát.
• Số liệu phân tích về hoạt động tương tác: phễu mục tiêu (người dùng bỏ qua quy trình đăng nhập hoặc đăng ký ở bước nào?) và sự kiện (người dùng thực hiện những hành động nào khi tương tác với biểu mẫu của bạn?)
• Hiệu suất trang web: các chỉ số lấy người dùng làm trung tâm (biểu mẫu đăng ký và đăng nhập của bạn có bị chậm vì lý do nào đó không và nếu có thì nguyên nhân là gì?).

Bạn cũng nên cân nhắc triển khai thử nghiệm A/B để thử các phương pháp đăng ký và đăng nhập khác nhau, cũng như phát hành theo giai đoạn để xác thực các thay đổi trên một nhóm nhỏ người dùng trước khi phát hành các thay đổi cho tất cả người dùng.

Nguyên tắc chung

Giao diện người dùng và trải nghiệm người dùng được thiết kế tốt có thể giảm tỷ lệ bỏ dở biểu mẫu đăng nhập:

• Đừng khiến người dùng phải tìm kiếm nút đăng nhập! Đặt đường liên kết đến biểu mẫu đăng nhập ở đầu trang, sử dụng từ ngữ dễ hiểu như Đăng nhập, Tạo tài khoản hoặc Đăng ký.
• Hãy tập trung! Biểu mẫu đăng ký không phải là nơi để khiến người dùng phân tâm bằng các ưu đãi và tính năng khác của trang web.
• Giảm thiểu sự phức tạp khi đăng ký. Chỉ thu thập dữ liệu khác của người dùng (chẳng hạn như địa chỉ hoặc thông tin thẻ tín dụng) khi người dùng thấy rõ lợi ích của việc cung cấp dữ liệu đó.
• Trước khi người dùng bắt đầu điền vào biểu mẫu đăng ký, hãy nêu rõ tuyên bố giá trị. Họ sẽ nhận được lợi ích gì khi đăng nhập? Đưa ra các ưu đãi cụ thể để khuyến khích người dùng hoàn tất quy trình đăng ký.
• Nếu có thể, hãy cho phép người dùng xác định danh tính bằng số điện thoại di động thay vì địa chỉ email, vì một số người dùng có thể không sử dụng email.
• Giúp người dùng dễ dàng đặt lại mật khẩu và làm cho đường liên kết Quên mật khẩu? trở nên rõ ràng.
• Đường liên kết đến tài liệu về điều khoản dịch vụ và chính sách quyền riêng tư: cho người dùng biết rõ ngay từ đầu về cách bạn bảo vệ dữ liệu của họ.
• Thêm biểu trưng và tên của công ty hoặc tổ chức của bạn vào trang đăng ký và đăng nhập, đồng thời đảm bảo rằng ngôn ngữ, phông chữ và kiểu phù hợp với phần còn lại của trang web. Một số biểu mẫu có vẻ như không thuộc cùng một trang web với nội dung khác, đặc biệt là nếu biểu mẫu đó có URL khác biệt đáng kể.

Tiếp tục học

• Tạo biểu mẫu ấn tượng
• Các phương pháp hay nhất để thiết kế biểu mẫu trên thiết bị di động
• Các chế độ kiểm soát biểu mẫu hiệu quả hơn
• Tạo biểu mẫu dễ tiếp cận
• Đơn giản hoá quy trình đăng nhập bằng Credential Management API
• Xác minh số điện thoại trên web bằng WebOTP API