type="reset"按钮还原初始值而非清空；form.reset()仅恢复dom加载时的default值，不处理js动态修改、新增字段、disabled项及多选下拉新增选项；彻底清空需遍历elements手动重置各类型控件值。
type="reset" 按钮不是“清空”，而是“还原到初始值”——如果你的 <input value="默认用户名">，点它会回到“默认用户名”，不是变空。真要一键清空所有字段（包括动态设过的、textarea、多选下拉），得手动控制。
为什么 form.reset() 不等于清空
它只恢复 DOM 加载时的 defaultValue、defaultChecked、defaultSelected 状态，不认 JS 后续改的值。常见坑有：
-
<input value="初始值">→ reset 后还是“初始值”，不是空字符串 - JS 动态插入的字段（如
form.appendChild(newInput)）完全不被reset()管理 -
<select multiple></select>只清掉初始选中项，新增的option.selected = true不会被重置 -
disabled字段在form.reset()中被跳过，但手动遍历时若没过滤，el.value = ""仍会生效
真正清空所有输入的 JS 实现
遍历 form.elements，按控件类型分别处理，这是目前最可靠、兼容性最好的方式：
<input type="text|email|number|...>、<textarea>：设el.value = ">-
<input type="checkbox">：设el.checked = false -
<select></select>单选：设el.selectedIndex = -1（清空选中）或el.value = ""（前提是第一项 value 为空） -
<select multiple></select>：遍历el.options，逐个设opt.selected = false - 跳过
type="reset"、type="button"、type="hidden"（除非业务要求清空 hidden）
示例函数：
function clearForm(form) {
const els = form.elements;
for (let i = 0; i
<h3>保留 ID 字段并自增的场景怎么处理</h3>
<p>很多录入表单需要提交后清空其他字段，但 ID 显示框要保持只读、且递增（如 1→2→3）。关键不在“跳过清空”，而在“reset 后立即接管”：</p>
- ID 输入框必须用
readonly（不能用disabled，否则form.reset()不动它，且FormData拿不到值） - 先调
form.reset()，确保所有验证状态、浏览器自动填充痕迹一并清理 - 再单独执行
idInput.value = String(nextId)，覆盖 reset 的结果 - 如果 ID 是后端返回的，应在提交成功回调里做这步，而不是 submit 事件里提前写死
别用 new FormData(form) 验证是否清空
它只收集可提交字段（忽略 disabled、无 name、type="reset" 等），也不反映 checked 或 selected 的 DOM 实时状态。真正判断是否清空，得直读属性：
- 文本类：
input.value === "" - 复选/单选：
input.checked === false - 单选下拉：
select.selectedIndex === -1或select.value === "" - 多选下拉：
select.selectedOptions.length === 0
动态字段、readonly 控件、contenteditable 元素——这些都得单独考虑，没有银弹。所谓“标准做法”，其实是根据你要清空的边界来决定遍历逻辑的细粒度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
