form.reset() 恢复字段为 html 初始 attribute 值而非清空；保留特定字段需移出表单或 reset 后手动恢复；禁用 preventdefault 模拟重置，因语义错乱、遗漏控件且初始值不可靠；自增 id 等应提交后由 js 更新，重置时手动清空其他字段并同步 ui 状态。
form.reset() 会把所有字段回退到 HTML 初始值，不是清空
点击 <input type="reset"> 或调用 form.reset()，浏览器实际做的是“还原 attribute 值”，比如 <input value="初始值"> 就会回到 “初始值”，而不是设为 ""。如果你希望某个字段（如 ID、token、隐藏标识）在重置时不被改动，它就不能依赖 reset 的默认行为。
保留特定字段的两种可靠做法
核心思路：不让目标字段参与 reset，或 reset 后立刻恢复它的值。
- 把要保留的字段**移出表单**：用
<input name="id" readonly>放在<form></form>外，再用 CSS 对齐布局；这样 reset 完全不影响它 - reset 后手动恢复目标字段：先调用
form.reset()，再立即执行document.getElementById('id').value = savedId；注意必须在 reset 之后赋值，否则会被覆盖 - 避免用
readonly+value混搭陷阱：如果字段是<input readonly value="123">，reset 仍会把它拉回 "123" —— 所以若你希望它“始终递增”或“随提交变化”，初始value应为空，靠 JS 控制
为什么不能用 preventDefault + 手动清空来“模拟保留”
有人给 reset 按钮加 onclick="event.preventDefault(); clearSome();"，看似能绕过 reset 行为，但隐患明显：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 语义错乱：
type="reset"按钮在可访问性 API 中被识别为“重置整个表单”，屏幕阅读器和键盘导航用户会预期全部清空 - 遗漏控件类型：手动清空容易漏掉
<select multiple></select>、<input type="checkbox" checked>、<textarea></textarea>的初始状态还原逻辑 - 初始值来源不可靠：如果页面加载后 JS 动态设置了字段值（比如从
localStorage恢复），reset 仍按 HTML 原始value还原，和你的 JS 状态不一致
真正需要“保留并更新”的字段（如自增 ID）该怎么处理
这类字段本质不是“保留旧值”，而是“提交后生成新值并显示”。正确链路是：
- 提交成功后，后端返回新 ID（或前端自增），JS 把它写入
document.getElementById('id').value - 重置表单时，**不调用 reset()，改用手动清空其他字段**：
form.querySelectorAll('input:not(#id), textarea, select').forEach(el => el.value = '') - 对 checkbox/radio 要单独处理：
el.checked = false；<select></select>需设el.selectedIndex = 0或匹配初始option[selected] - 别忘了清除验证状态：
el.reportValidity()不必要，但el.setCustomValidity('')可选，避免残留红框
最易被忽略的点：reset 不触发 input 或 change 事件，所以依赖这些事件的 UI 反馈（比如清空按钮变灰）不会自动响应——得自己补上状态同步逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
