重置按钮（type="reset"）在绝大多数真实场景中不该存在，因其破坏可访问性、不可预测且不可逆；应改用type="button"手动清空并触发事件，配aria-live播报结果。
重置按钮（type="reset"）在绝大多数真实场景中不该存在，它和提交按钮（type="submit"）的语义、行为、可访问性影响完全不同，不能混用或仅靠样式区分。
为什么type="reset"按钮天然破坏表单可访问性
屏幕阅读器用户听到“重置”时，无法判断这是清空全部字段、还是仅撤销本次修改；键盘用户按一次Enter可能误触，且无二次确认机制。更关键的是：reset会强制将所有字段恢复为初始value值，而这个值往往不是用户最初填写的内容（比如<input value="请输入邮箱">这种占位文本也会被还原）。
- 它不触发
change或input事件，辅助技术无法感知状态突变 - 若表单含动态生成字段（如JS添加的复选框），
reset完全不处理它们，导致视觉与DOM状态不一致 - WCAG 3.2.2（可预测性）明确反对无提示的重置行为——它既不可逆，也不可预期
type="submit"按钮必须显式声明type属性
很多开发者依赖button默认行为，但未设type的button在表单内默认是submit，这会导致意外提交。而显式写type="submit"不仅防错，还让辅助技术准确识别其角色。
- 必须搭配
form属性或位于form标签内，否则点击无效（尤其在 Shadow DOM 或动态插入场景） - 禁用状态要同步
disabled和aria-disabled="true"，仅后者无法阻止键盘聚焦 - 不要用
aria-label覆盖按钮文字，比如aria-label="提交表单"+ 文字“确认”，会让屏幕阅读器重复播报或忽略视觉文案
替代reset的可访问做法
真需要“撤销”功能时，应提供语义清晰、可控、可逆的操作，而不是依赖原生reset。
- 用
type="button"实现“清空”逻辑：手动遍历form.elements，对每个字段调用field.value = ""或field.checked = false，再触发input事件确保校验更新 - 配合
aria-live区域播报操作结果，例如“已清空所有输入项”，而非静默执行 - 若字段有默认值（如地址自动填充），保留该值并仅清空用户修改部分，需记录
dataset.initialValue等元数据 - 绝对避免在多步表单中使用
reset——它会跳回第一步并丢失所有中间状态，违反WCAG 3.2.1（页面内的一致性）
最常被忽略的点是：重置按钮的文案本身。写“重置”不如写“清空并重新开始”，后者明确告知用户后果；而“提交”按钮若处于异步状态，必须用aria-busy="true"配合aria-live，否则屏幕阅读器用户会以为操作卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
