浏览器只认HTML中写死的value、checked、selected等attribute为默认值，form.reset()回退到初始attribute状态，而非清空；JS设置的property不影响重置行为。
value、checked、selected 属性才是默认值的唯一来源
浏览器不认 JS 赋的 value、checked 或 selectedIndex，只认 HTML 中写死的 attribute。比如 <input value="admin"> 加载后显示 “admin”，但若 JS 执行 el.value = "user"，之后点重置按钮，输入框会回到 “admin”，不是 “user”。
常见错误现象：placeholder="请输入邮箱" 被当成默认值；或用 DOMContentLoaded 后 JS 设置 value，结果表单重置时直接清空。
-
value对input[type="text"]、input[type="email"]等生效，但对checkbox和radio仅定义提交值，是否默认选中靠checked -
select本身没有value属性可设默认项，必须在某个<option selected>上加selected -
textarea的默认内容必须写在标签体内，value属性完全无效 - 所有这些属性都必须是字符串字面量，
value=123（不带引号）在 HTML 中属于语法错误，可能被浏览器忽略或解析异常
form.reset() 不是“清空”，而是“回退到 HTML 初始状态”
调用 form.reset() 或点击 <input type="reset">，本质是把每个控件还原成页面加载时 DOM 解析出的 attribute 值：比如 <input value="张三"> 会回到 “张三”，<input checked> 保持勾选，<textarea>留言草稿</textarea> 恢复那段文字。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- JS 修改过
el.value后，reset()不会恢复它——因为修改的是 property，而 reset 只读 attribute - 动态插入的表单控件（如 Vue/React 渲染的
input）不在初始 HTML 中，reset()完全不处理它们 - 控件没写
name属性（例如只有id="email"），就不会参与重置，哪怕它有value或checked - 全
disabled或display: none的表单，reset()表现静默，无报错也无反馈
想真正“清空”，得手动遍历并重置各类型字段
业务中多数要的是“全部清空”，不是“回到初始”。这时候硬套 reset() 很容易翻车，尤其当初始 value="" 或压根没写 value 时。
更可控的做法是手动操作：
-
input[type="text"]、input[type="email"]、textarea：统一设el.value = "" -
input[type="checkbox"]、input[type="radio"]：设el.checked = false -
select单选：设el.selectedIndex = -1；多选：遍历el.options，逐个设option.selected = false - 注意过滤
disabled和readonly元素——它们不会被reset()影响，但手动清空时容易漏掉
跨页面保存默认值，localStorage + 服务端渲染优先级更高
如果用户在登录页填了邮箱，跳转到资料页还想预填，不能只靠 JS 在新页面 onload 里读 localStorage 再赋值——这会导致页面闪动、SEO 不友好、SSR 不兼容。
正确顺序是：
- 服务端渲染时，优先从 session / cookie / auth token 中取用户信息，直接写进 HTML 的
value属性（如<input name="email" value="user@example.com">） - 前端 JS 作为 fallback：DOM 加载完成后，检查
input当前value是否为空，再读localStorage.getItem("email")并补上 - 表单提交前，把当前值存回
localStorage，但注意避免覆盖服务端下发的真实值（比如用户刚改完邮箱还没提交，不该立刻覆盖） - 不要用
new FormData(form)来判断是否“已填值”——它不收集disabled字段，也不反映checked状态变化，且无法区分空字符串和未填写
reset() 的行为，很多人直到上线后才发现它根本不是“清空”。 
