响应表单事件
您可以使用 JavaScript 来响应表单上的用户互动、显示其他表单字段、提交表单等。
帮助用户填写其他表单控件
假设您创建了一个调查问卷表单。在用户选择一个选项后，您希望再显示一个 <input>，用于询问与所选选项相关的特定问题。如何仅显示相关的 <input> 元素？
仅当当前选择了关联的 <input type="radio"> 时，您才可以使用 JavaScript 显示 <input>。
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
我们来看一下演示中的 JavaScript 代码。您是否注意到 aria-controls 和 aria-expanded 属性？
使用这些 ARIA 属性可以帮助屏幕阅读器用户了解何时显示或隐藏其他表单控件。
确保用户无需离开页面即可提交表单
假设您有一个评论表单。当读者添加评论并提交表单时，最好让读者无需刷新网页即可立即看到该评论。
为此，请监听 onsubmit 事件，然后使用 event.preventDefault() 阻止默认行为，并使用 Fetch API 发送 FormData。
您的后端脚本可以检查 POST 请求是来自浏览器（使用表单元素的 action 属性，其中 method="post"）还是来自 JavaScript（如 fetch() 请求）。
if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
// return JSON
} else {
// return HTML
}
始终通知屏幕阅读器用户有关动态内容变更。
具有 aria-live="polite" 属性的元素添加到您的 HTML 中，并在更改后更新该元素的内容。例如，在用户提交评论后，将文本更新为“您的评论已成功发布”。
详细了解 ARIA 直播区域。
使用 JavaScript 进行验证
确保错误消息契合您网站的风格和语气
默认错误消息的措辞因浏览器而异。
如何确保向所有用户显示相同的消息，并且消息与您网站的样式和语气相一致？使用 Constraint Validation API 的 setCustomValidity() 方法定义您自己的错误消息。
确保用户实时收到关于错误的通知
用于表单验证的内置 HTML 功能非常适合在数据发送到后端之前通知用户无效的表单字段。在用户离开表单字段后立即通知他们，不是很好吗？
监听在元素失去焦点时触发的 blur 事件，并使用 ValidityState 接口检测表单控件是否无效。
确保用户可以看到自己输入的密码
为尊重用户的隐私，为 <input type="password"> 输入的文本默认处于遮盖状态。通过显示 <button> 来切换所输入文本的公开范围，帮助用户输入密码。
试用演示版。使用 Show Password <button>（显示密码）切换所输入文本的可见性。
运作方式是怎样的？点击显示密码后，密码字段的 type 属性从 type="password" 更改为 type="text"，<button> 文本将更改为“隐藏密码”。
请务必使显示密码按钮可供访问。使用 aria-controls 属性将 <button> 与 <input type="password"> 连接起来。
如需在密码当前显示或隐藏时通知屏幕阅读器用户，请将隐藏元素与 aria-live="polite" 搭配使用，并相应地更改其文本。请务必让屏幕阅读器用户知道何时显示密码以及是否让查看屏幕的其他人可以看到密码。
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
详细了解如何实现显示密码选项。