重置按钮靠HTML的value属性而非JS的value属性，因浏览器重置时读取的是初始attribute值；JS修改value property不影响重置行为，需用defaultValue等镜像属性设置初始值。
重置按钮保留默认值，靠的是 HTML 中写的 value 属性，不是 JS 赋的 value property。 你点 type="reset" 按钮或调用 form.reset()，浏览器只认加载时解析出的 attribute 值——也就是你在标签里手写的 value="xxx"、checked、selected 这些。
为什么改了 input.value 后重置不回“默认值”？
因为 JS 修改的是元素的 value property（运行时属性），而重置机制读取的是 value attribute（HTML 初始属性）。两者可以长期不一致：
-
<input value="张三">→ 页面加载后el.getAttribute('value') === "张三"，el.value === "张三" - 用户输入“李四” →
el.value变成"李四"，但getAttribute('value')仍是"张三" - 点重置 → 浏览器把
el.value设回getAttribute('value')，即"张三"，不是空，也不是“李四”
value 属性写在哪、怎么写才生效？
必须写在 HTML 标签内，且仅对可提交控件有效。以下写法才被重置逻辑识别：
-
<input type="text" name="title" value="未命名">✅ 有name，有valueattribute -
<textarea name="desc">默认说明</textarea>✅textarea的初始值是标签体内容，不是value属性 -
<select name="category"><option value="1" selected>全部</option></select>✅selected是初始 attribute -
<input type="checkbox" name="agree" checked>✅checked属性存在即初始勾选 -
<input type="text" id="email">❌ 缺name，重置时直接忽略 -
<input type="text" name="phone" disabled>❌disabled状态下不参与重置
JS 动态设初始值，怎么让重置也认它？
不能靠后期 setAttribute('value', ...) 或 el.value = ... —— 重置不看这些。唯一可靠方式是：在 DOM 加载后、任何交互前，用 JS 改写 defaultValue、defaultChecked、defaultSelected 这些“初始值镜像属性”：
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input[name="title"]');
input.defaultValue = '新默认标题'; // 这样 reset 才会回到它
const checkbox = document.querySelector('input[name="agree"]');
checkbox.defaultChecked = true;
const select = document.querySelector('select[name="category"]');
select.options[0].defaultSelected = true;
注意：defaultValue 只对 input 和 textarea 有效；defaultChecked 对 checkbox/radio；defaultSelected 对 option。改完之后再调用 form.reset()，行为就和 HTML 初始值一致了。
最容易被忽略的一点：重置不是“清空”，而是“回滚”。如果你期望点一下就全变空，那就别依赖原生 reset，老老实实手动遍历赋空值——否则你会反复掉进 getAttribute('value') 和 .value 不一致的坑里。
