Phản hồi các sự kiện biểu mẫu
Bạn có thể sử dụng JavaScript để phản hồi các tương tác của người dùng trên biểu mẫu, hiển thị các trường biểu mẫu bổ sung, gửi biểu mẫu và làm nhiều việc khác.
Giúp người dùng điền vào các chế độ kiểm soát biểu mẫu bổ sung
Giả sử bạn đã tạo một biểu mẫu khảo sát. Sau khi người dùng chọn một tuỳ chọn, bạn cần hiển thị thêm một <input> để đặt một câu hỏi cụ thể liên quan đến lựa chọn đó.
Làm thế nào để bạn chỉ có thể hiển thị phần tử <input> có liên quan?
Bạn có thể sử dụng JavaScript để chỉ hiển thị <input> khi <input type="radio"> liên kết hiện được chọn.
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
Hãy cùng xem mã JavaScript để xem bản minh hoạ.
Bạn có nhận thấy các thuộc tính aria-controls và aria-expanded không?
Sử dụng các
thuộc tính ARIA
này để giúp người dùng trình đọc màn hình nắm được thời điểm một thành phần điều khiển biểu mẫu bổ sung được hiển thị hoặc bị ẩn.
Đảm bảo người dùng có thể gửi biểu mẫu mà không phải rời khỏi trang
Giả sử bạn có một biểu mẫu nhận xét. Khi người đọc thêm nhận xét và gửi biểu mẫu, tốt nhất là họ có thể xem ngay nhận xét mà không cần làm mới trang.
Để làm được điều này, hãy theo dõi sự kiện onsubmit, sau đó sử dụng event.preventDefault() để ngăn hành vi mặc định và gửi FormData bằng API Tìm nạp.
Tập lệnh phụ trợ có thể kiểm tra xem yêu cầu POST có vẻ là từ trình duyệt (sử dụng thuộc tính action của phần tử biểu mẫu, trong đó method="post") hay từ JavaScript, chẳng hạn như yêu cầu fetch().
if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
// return JSON
} else {
// return HTML
}
Luôn thông báo cho người dùng trình đọc màn hình về các thay đổi đối với nội dung động.
Thêm một phần tử có thuộc tính aria-live="polite" vào HTML và cập nhật nội dung của phần tử đó sau khi thay đổi.
Ví dụ: Cập nhật nội dung thành "Bình luận của bạn đã được đăng thành công" sau khi người dùng gửi bình luận.
Tìm hiểu thêm về các khu vực trực tiếp của ARIA.
Xác thực bằng JavaScript
Đảm bảo thông báo lỗi phù hợp với phong cách và sắc thái trang web của bạn
Cách diễn đạt thông báo lỗi mặc định sẽ khác nhau giữa các trình duyệt.
Làm cách nào để bạn có thể đảm bảo rằng một thông báo hiển thị cho tất cả người dùng và phù hợp với phong cách và sắc thái của trang web?
Sử dụng phương thức setCustomValidity() của Constraint Validation API (API Xác thực quy tắc ràng buộc) để xác định thông báo lỗi của riêng bạn.
Đảm bảo người dùng được thông báo về lỗi theo thời gian thực
Các tính năng HTML tích hợp để xác thực biểu mẫu rất hữu ích trong việc thông báo cho người dùng về các trường biểu mẫu không hợp lệ trước khi dữ liệu được gửi đến phần phụ trợ của bạn. Thông báo cho người dùng ngay khi họ rời khỏi trường biểu mẫu không phải là một cách thuận tiện phải không?
Hãy theo dõi sự kiện blur sẽ kích hoạt khi một phần tử mất tiêu điểm và sử dụng giao diện ValidityState để phát hiện xem chế độ kiểm soát biểu mẫu có hợp lệ hay không.
Đảm bảo người dùng có thể xem được mật khẩu mà họ đã nhập
Theo mặc định, văn bản nhập cho <input type="password"> sẽ được che khuất để tôn trọng quyền riêng tư của người dùng.
Giúp người dùng nhập mật khẩu của họ, bằng cách hiển thị <button> để bật/tắt chế độ hiển thị của văn bản đã nhập.
Dùng thử bản minh hoạ. Bật/tắt chế độ hiển thị của văn bản đã nhập bằng cách sử dụng <button> Show Password (Hiện mật khẩu).
Cơ chế này hoạt động như thế nào? Nhấp vào Show Password (Hiện mật khẩu) sẽ thay đổi thuộc tính type của trường mật khẩu từ type="password" thành type="text" và văn bản <button> sẽ thay đổi thành "Hide Password" (Ẩn mật khẩu).
Bạn cần phải cho phép nút Hiển thị mật khẩu có thể truy cập được.
Kết nối <button> với <input type="password"> bằng thuộc tính aria-controls.
Để thông báo cho người dùng trình đọc màn hình khi mật khẩu đang hiển thị hoặc bị ẩn, hãy sử dụng phần tử ẩn với aria-live="polite" và thay đổi văn bản tương ứng.
Điều quan trọng là phải cho phép người dùng trình đọc màn hình biết khi nào mật khẩu hiển thị và người khác đang nhìn vào màn hình của họ có thể nhìn thấy mật khẩu đó.
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
Tìm hiểu thêm về cách triển khai tuỳ chọn hiển thị mật khẩu.