reset按钮将表单恢复为html加载时的初始值，而非清空；动态修改的值不会被还原，需手动保存快照并恢复；注意无障碍设计与框架响应式同步。
点击后表单恢复初始值，不是清空
HTML 的 <input type="reset"> 按钮默认行为是将表单控件恢复到页面**加载时的初始值**，不是清空为 "" 或 null。这点常被误解——如果你用 JavaScript 动态改过 value、checked 或 selected，reset() 不会还原那些改动，只认 HTML 中写死的 value="xxx"、checked、selected 等属性。
常见错误现象：<input value="默认值"> 加载后 JS 改成 "用户输入"，点重置按钮后变回 "默认值"；但若没写 value 属性，初始值就是空字符串，重置后就是清空。
- 确保关键字段在 HTML 中显式声明初始状态，比如
<input value="0">、<select><option selected>选项1</option></select> - 对于动态生成的表单，
reset()无效，必须手动恢复（见下节） -
reset()会触发reset事件，可用于监听，但不能阻止默认行为（除非event.preventDefault()，此时需自行实现还原逻辑）
用 JavaScript 手动触发重置并兼容动态表单
当表单字段由 JS 初始化（如从 API 加载数据填充），或使用了自定义组件（如封装的 DatePicker、Switch），原生 reset() 失效。这时要自己保存快照再还原。
实操建议：
- 在表单加载完成、初始值填入后，立即调用
form.reset()并记录当前状态，或用form.querySelectorAll("input, select, textarea")遍历保存value、checked、selectedIndex等 - 绑定按钮点击事件，遍历保存的字段状态并逐个赋值，注意
type="checkbox"和type="radio"要设checked，select[multiple]要设options[i].selected - 避免直接改
element.value = ""清空——这和“重置”语义不符，用户可能期望回到上次提交/加载时的值
简短示例（保存初始值）：
const form = document.getElementById("myForm");
const initialValues = {};
form.querySelectorAll("input, select, textarea").forEach(el => {
if (el.type === "checkbox" || el.type === "radio") {
initialValues[el.name] = el.checked;
} else if (el.tagName === "SELECT" && el.multiple) {
initialValues[el.name] = Array.from(el.selectedOptions).map(o => o.value);
} else {
initialValues[el.name] = el.value;
}
});
reset 按钮样式与可访问性注意事项
浏览器默认的 <input type="reset"> 按钮没有语义化文本，屏幕阅读器可能只读作“按钮”，对无障碍不友好。
- 务必添加
value属性，如<input type="reset" value="重置表单">，否则辅助技术无法获知功能 - 不要仅靠颜色区分重置按钮（如红色），需配合文字或图标，因为色觉障碍用户无法识别
- 避免用
<button type="reset"></button>却不写内容，或写空格、 - 如果重置操作有副作用（如清空已上传的文件预览），应在按钮文案中提示，例如
重置（含已选文件）
为什么有时 reset() 看似没反应？
最常见原因是：表单元素不在同一个 <form></form> 容器内，或用了 form 属性指向其他 form，但 JS 调用的是错误的 form 实例。
- 检查元素是否真属于该 form：用
el.form === formEl判断，而不是只看 DOM 位置 -
form.reset()不会重置disabled或readonly字段的值，但会重置它们的value（只要它们有初始值） - Shadow DOM 内的表单需通过
shadowRoot.querySelector("form")获取，不能靠外部document.getElementById - Vue/React 等框架中，直接操作 DOM 的
reset()可能与响应式状态脱节，必须同步更新 data/state
重置的本质是“回退到 HTML 初始快照”，不是“清空”。这个边界一旦模糊，后续维护就容易出不可预期的值不一致问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
