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

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Sử dụng các tính năng của trình duyệt trên nhiều nền tảng để tạo 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ì thiết kế biểu mẫu đăng nhập tốt là yếu 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 gấp 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ượt thoát có thể đồng nghĩa với một người dùng bị mất và không hài lòng, chứ không chỉ là một cơ hội đăng nhập bị bỏ lỡ.

Sau đâ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 mỗi 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 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 cho các thuộc tính đầu vào name và id.
• Đặt tính năng đăng nhập trong 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" để nhập mật khẩu trong biểu mẫu đăng ký và 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" để nhập 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 để nhập mật khẩu.
• Không nhập hai lần.
• Thiết kế biểu mẫu để bàn phím di động không che khuất các mục nhập hoặc nút.
• Đảm bảo người dùng có thể sử dụng biểu mẫu trên thiết bị di động: sử dụng văn bản dễ đọc và đảm bảo các mục nhập và nút đủ lớn để hoạt động như mục tiêu chạm.
• Duy trì thương hiệu và phong cách trên trang đăng ký và trang đăng nhập.
• Kiểm thử trong thực tế cũng như trong phòng thí nghiệm: tích hợp số liệu phân tích trang, số liệu phân tích lượt 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 các trình duyệt và thiết bị: hành vi của biểu mẫu thay đổi đáng kể trên 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 thuộc tính này cho phép chức năng trình duyệt tích hợp, cải thiện khả năng hỗ trợ tiếp cận và thêm ý nghĩa vào thẻ đánh dấu.

Sử dụng <form>

Bạn có thể muốn gói dữ liệu đầu vào trong <div> và 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> cũ. Điều này giúp trình đọc màn hình và các thiết bị hỗ trợ khác truy cập vào trang web của bạn, bật một loạt tính năng tích hợp sẵn của trình duyệt, giúp bạn dễ dàng tạo tính năng đăng nhập chức năng cơ bản cho các trình duyệt cũ 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 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 một 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 dữ liệu đầ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 dữ liệu đầu vào.
• Trình đọc màn hình sẽ thông báo văn bản nhãn khi nhãn hoặc dữ liệu đầu vào của nhãn nhận được tiêu điểm.

Đừng sử dụng phần giữ chỗ làm nhãn đầu vào. Mọi người có thể quên mục đích nhập dữ liệu sau khi 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 Không sử dụng thuộc tính phần giữ chỗ và Phần giữ chỗ trong trường biểu mẫu gây hại nếu bạn chưa bị thuyết phục.

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 của Google về AI, giúp người dùng quét nhanh hơn. Bạn sẽ thấy các nhãn và dữ liệu đầu vào có chiều rộng đầy đủ và không cần điều chỉnh chiều rộng nhãn và dữ liệu đầu vào cho vừa với văn bản nhãn.

Mở lỗi label-position trên thiết bị di động để tự 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 hỗ trợ tiếp cận và chức năng gửi biểu mẫu tích hợp sẵn, đồng thời bạn có thể dễ dàng tạo kiểu cho các phần tử này. 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 một biểu mẫu đã được gửi. Có hai cách để thực hiện việc đó:

• 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() và 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 việc đă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 lấy biểu mẫu ra khỏi DOM cũng như cho người dùng biết là 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 các trang web nhanh và phản hồi nhanh. Điều này làm chậm các lượt tương tác và tăng tải máy chủ.

Ngược lại, đừng tắt tính năng gửi biểu mẫu 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 của khách hàng. Người dùng có thể bỏ lỡ một mục nào đó trong biểu mẫu, sau đó thử nhấn nhiều lần vào nút Đăng nhập (đã tắt) và cho 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 những gì còn thiếu khi họ nhấp vào nút bị tắt.

Không nhập dữ liệu hai lần

Một số trang web buộc người dùng nhập email hoặc mật khẩu hai lần. Điều đó có thể làm giảm lỗi cho một số người dùng, nhưng gây thêm công việc cho tất cả người dùng và tăng tỷ lệ bỏ ngang. Việc hỏi hai lần cũng không có ý nghĩa khi trình duyệt tự động điền địa chỉ email hoặc đề xuất mật khẩu mạnh. Bạn nên cho phép người dùng xác nhận địa chỉ email của họ (bạn vẫn cần phải 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 phần tử

Đây mới là phần thực sự thú vị! 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 phần tử đầu vào.

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

Phương thức 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 phương thức nhập đó là dành cho 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 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. Đừng quên thêm đường liên kết 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 tích hợp sẵn cơ bản của trình duyệt… không cần JavaScript!

Nếu bạn cần sử dụng số điện thoại thay vì địa chỉ email, <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ý tưởng cho số PIN. Mọi điều bạn muốn biết về inputmode có thêm thông tin chi tiết.

Ngăn bàn phím trên thiết bị 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 trên thiết bị di động có thể che khuất biểu mẫu của bạn hoặc xấu 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 việc này bằng cách chỉ hiển thị các mục nhập email/số điện thoại và mật khẩu cùng 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 thiết bị

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

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

Một số trang web (bao gồm cả Amazon và eBay) tránh vấn đề này bằng cách yêu cầu email/số điện thoại và mật khẩu trên hai trang. Phương pháp này cũng đơ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 bằng một <form> duy nhất. Sử dụng JavaScript để ban đầu chỉ hiển thị phần nhập email, sau đó ẩn phần này và hiển thị phần 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 lú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 với giá trị email để cho phép trình quản lý mật khẩu lưu trữ đúng giá trị. Các kiểu biểu mẫu mật khẩu mà Chromium hiểu được cung cấp một ví dụ về mã.

Giúp người dùng tránh 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 dữ liệu đầu vào, nhờ đó, người dùng không phải ghi 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 các mục nhập email, vốn có tỷ lệ bỏ ngang cao.

Quá trình này có hai phần:

1. Các thuộc tính autocomplete, name, id và type giúp trình duyệt hiểu vai trò của dữ liệu đầu vào để lưu trữ dữ liệu có thể được dùng để tự động điền sau này. Để 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 có giá trị name hoặc id ổn định (không được tạo ngẫu nhiên trên mỗi lần tải trang hoặc triển khai trang web) và 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 dữ liệu đầu vào bằng cách sử dụng dữ liệu đã 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 trong các trình duyệt hiện đại nhận dạng, mặc dù bạn nên sử dụng type="email" và bạn có thể muốn sử dụng id="email" và name="email".

Đối với dữ liệu nhập 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" cho mật khẩu mới

• Sử dụng autocomplete="new-password" và id="new-password" để 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" để nhập mật khẩu trong biểu mẫu đăng nhập hoặc nhập mật khẩu cũ của người dùng trong biểu mẫu thay đổi mật khẩu. 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 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

Các trình duyệt khác nhau 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 hiệu quả thì tương tự 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ẽ hiển thị, sau đó phương thức xác thực sinh trắc học (vân tay hoặc nhận dạng khuôn mặt) 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 tự động điền và mật khẩu của trình duyệt không đơ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 giữa các 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 cho phương pháp phỏng đoán bằng một hệ thống công thức".

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

Bật trình duyệt để đề xuất mật khẩu mạnh

Các trình duyệt hiện đại sử dụng thông tin 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.

Dưới đây là cách Safari thực hiện việc này trên máy tính.

(Tính năng đề xuất mật khẩu mạnh và duy nhấ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 "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 ghi 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 duy nhất và mạnh 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 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 thành phần nhập và nút 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à vấn đề phổ biến với các biểu mẫu đăng nhập trên nhiều trang web.

Đảm bảo các mục nhập và nút đủ lớn

Kích thước và khoảng đệm mặc định cho các mục nhập 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 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. Các nguyên tắc giao diện của Apple đề xuất 48x48 px và W3C đề xuất ít nhất 44x44 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ử nghiệm điều này bằng một thiết bị di động thực và một ngón tay hoặc ngón cái thực. Bạn có thể thoải mái nhấn vào từng nút và phương thức nhập.

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

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

Tìm kiếm touch target (mục tiêu 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. Đó là lý do bạn nên sử dụng các mục tiêu chạm có kích thước phù hợp.

Tăng kích thước văn bản

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

Các trình duyệt trên các nền tảng khác nhau có kích thước phông chữ khác nhau, vì vậy, rất khó để chỉ định một kích thước phông chữ cụ thể hoạt động tốt ở 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: kích thước thực tế phù hợp là kích thướ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 khá dễ đọc, nhưng ngay cả khi có thị lực tốt, bạn vẫn khó đọc văn bản 16px trên Chrome cho Android. Bạn có thể đặt 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 nội dung nghe nhìn. 20px là kích thước phù hợp trên thiết bị di động, nhưng bạn nên kiểm thử điều này với bạn bè hoặc đồng nghiệp có thị lực kém.

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

Cung cấp đủ khoảng trống giữa các mục nhập

Thêm đủ khoảng đệm để các mục nhập hoạt động tốt dưới dạng mục tiêu chạm. Nói cách khác, hãy nhắm đến khoảng lề bằng chiều rộng của một ngón tay.

Đảm bảo dữ liệu đầu vào của bạn hiển thị rõ ràng

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

Ngoài khoảng đệm, hãy thêm đường viền: trên nền trắng, quy tắc chung tốt 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ị nhập không hợp lệ

Trình duyệt có các tính năng tích hợp để 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 một 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 dữ liệu đầu vào không có nội dung.

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

Thử nhiều cách 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

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

Mã sau đây sử dụng nút văn bản để thêm chức năng Hiển thị 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>

Dưới đây là mã 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:

Cho phép 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 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) rồi đến 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 thêm chức năng Hiện mật khẩu, hãy nhớ thêm aria-label để cảnh báo rằng mật khẩu sẽ xuất hiện. 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ể thấy cả hai tính năng ARIA đang hoạt động trong Glitch sau:

Bài viết Tạo biểu mẫu hỗ trợ 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 để xác thực cơ bản, nhưng bạn cũng nên sử dụng JavaScript để xác thực mạnh mẽ 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 API Xác thực quy tắc ràng buộc (được hỗ trợ rộng rãi) để thêm tính năng xác thực tuỳ chỉnh bằng cách sử dụng giao diện người dùng trình duyệt tích hợp để đặ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.

Analytics và RUM

Câu nói "Chỉ khi đo lường được thì bạn mới có thể cải thiện được" đặ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 giảm giá về khả năng hữu dụng 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 trải nghiệm của người dùng khi sử dụng biểu mẫu đăng ký và đăng nhập:

• Số liệu phân tích trang: lượt xem trang đăng ký và đăng nhập, tỷ lệ thoát và số lượt thoát.
• Phân tích lượt tương tác: phễu mục tiêu (người dùng bỏ ngang luồng đăng nhập hoặc đăng nhập ở đâu?) và sự kiện (người dùng thực hiện hành động gì 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ố tập trung vào người dùng (biểu mẫu đăng ký và đăng nhập của bạn có chậm vì lý do nào đó không? Nếu có thì lý do là gì?).

Bạn cũng nên cân nhắc triển khai thử nghiệm A/B để thử nhiều phương pháp đăng ký và đăng nhập, cũng như triển khai 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ỏ ngang biểu mẫu đăng nhập:

• Đừng bắt người dùng phải tìm cách đăng nhập! Đặt đường liên kết đến biểu mẫu đăng nhập ở đầu trang, sử dụng các từ ngữ dễ hiểu như Đăng nhập, Tạo tài khoản hoặc Đăng ký.
• Hãy tập trung vào việc này! Biểu mẫu đăng ký không phải là nơi để làm người dùng phân tâm bằng các ưu đãi và tính năng khác trên trang web.
• Giảm thiểu độ phức tạp của quy trình đăng ký. Chỉ thu thập dữ liệu người dùng khác (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 khi 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õ giá trị của đề xuất. Họ sẽ được hưởng lợi gì khi đăng nhập? Đưa ra cho người dùng các ưu đãi cụ thể để 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 nổi bật đường liên kết Quên mật khẩu?.
• Đưa ra đườ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ư: ngay từ đầu, hãy cho người dùng biết rõ cách bạn bảo vệ dữ liệu của họ.
• Thêm biểu trưng và tên công ty hoặc tổ chức của bạn vào trang đăng ký và trang đăng nhập, đồng thời đảm bảo rằng ngôn ngữ, phông chữ và kiểu chữ khớ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à khi có URL khác biệt đáng kể.

Tiếp tục học hỏi

• Tạo biểu mẫu tuyệt vời
• 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 thành phần điều khiển biểu mẫu có nhiều chức năng hơn
• Tạo biểu mẫu hỗ trợ tiếp cận
• Đơn giản hoá quy trình đăng nhập bằng API Quản lý thông tin xác thực
• Xác minh số điện thoại trên web bằng WebOTP API

Ảnh của Meghan Schiereck trên Unsplash.