html中value属性写在标签里才是浏览器认可的初始值；未声明时为""而非undefined或placeholder内容，reset()恢复的是该html attribute值而非js设置的property值。
value属性怎么设才是真正的初始值
HTML 中 value 属性写在标签里，才是浏览器认的“初始值”。不写，就是空字符串 ""，不是 undefined，也不是 placeholder 里的文字。
常见错误现象：placeholder="请输入邮箱" 被当成默认值，结果表单提交时 value 还是空，后端收不到；服务端模板（如 Jinja2）没转义变量，导致引号崩坏，value="{{ user.name }}" 渲染成 value="张"三"，截断失败。
- 纯 HTML：直接写
<input type="text" name="username" value="张三"> - React 受控组件：用
value+onChange，初始值由 state 决定，例如const [name, setName] = useState("张三") - React 非受控组件：用
defaultValue="张三"，但后续 props 改变不会更新输入框 - Vue：绑定
v-model到已初始化的响应式变量，如ref("张三")
value 和 defaultValue 别混：value 是当前值，参与渲染和提交；defaultValue 只在首次挂载时起作用，之后改它无效。
reset 按钮到底恢复成什么
<input type="reset"> 或 form.reset() 恢复的是 HTML 初始化时的 value 属性值（即 attribute），不是你后来用 JS 设置的 input.value（property）。
典型翻车现场：<input value="默认值"> → JS 执行 el.value = "新内容" → 点 reset → 输入框变空，不是变回“默认值”。
- 验证方法：执行
el.getAttribute('value')（返回原始 HTML 值）和el.value（返回当前 property 值），两者常不一致 - textarea 要靠
defaultValue，不是innerText或innerHTML - checkbox/radio 必须同步设置
defaultChecked，否则reset()不会按你预期恢复 - select 元素依赖
<option selected></option>，JS 改过selectedIndex后若破坏该状态，reset()也失效
动态填初始值时 JS 执行时机很关键
从 URL 参数或 localStorage 读取并填入，必须等 DOM 就绪，且避开框架接管时机。早了找不到元素，晚了被 Vue/React 覆盖。
常见错误现象：页面加载后 JS 赋值成功，但用户一交互，输入框又变空；Safari 隐私模式下直接读 localStorage 抛错，整个逻辑中断。
- 取 URL 参数示例：
const name = new URLSearchParams(window.location.search).get('name')，再赋给document.querySelector('input[name="username"]').value - 读 localStorage 示例：
const saved = localStorage.getItem('form-username')，记得加|| ''防止"null"字符串被写入 - Safari 隐私模式需
try/catch包裹：try { ... } catch (e) { /* fallback */ } - React/Vue 中优先走状态初始化，别在
useEffect或mounted里直接 DOM 操作赋值
手动缓存初始值才能真正“重置到我想要的状态”
原生 reset 行为太死板，业务中往往需要恢复 JS 动态设过的值、或用户上次填写的内容。这时必须自己存快照，并在 reset 事件后覆盖。
容易忽略的坑：getAttribute('value') 在 HTML 没写 value 时返回 null，而 el.value 是空字符串；setTimeout(..., 0) 不是可选，是必须——因为 reset 事件触发时字段已被清空但尚未完成渲染，不延迟就覆不上去。
- 缓存建议在
DOMContentLoaded后立即做，遍历所有字段，记录value、checked、selectedIndex等 - reset 事件监听里用
setTimeout(() => { /* 赋值逻辑 */ }, 0) - checkbox/radio 要单独处理
defaultChecked，不能只看value - 动态添加的 input、第三方表单组件、
contenteditable区域，原生 reset 完全不生效，必须额外清理
复杂点在于：初始值来源可能有多个（HTML、URL、localStorage、API 响应），而 reset 语义是“回到上次打开页面时的状态”，这个状态得你自己定义、自己存、自己恢复。浏览器不会替你记住你心里想的那个“初始”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
