html中value初始值必须写在标签的value属性里，因为只有该attribute被浏览器视为重置时恢复的初始值；js设置的input.value是property，不影响reset行为，el.getattribute('value')返回html原始值，el.value返回当前值。
HTML中value初始值必须写在标签的value属性里，不写就是空字符串""，不是undefined，也不是placeholder里的文字。
为什么value必须写在HTML里，不能靠JS赋值
浏览器解析HTML时，只有value这个attribute（属性）被当作“初始值”，后续调用form.reset()或点击<button type="reset"></button>时，恢复的就是它。JS设置input.value = "xxx"改的是property（属性值），不影响重置逻辑。
- 验证方法：
el.getAttribute('value')返回原始HTML值，el.value返回当前输入值，两者常不一致 - 翻车现场：
<input value="张三">→ JS执行el.value = "李四"→ 点重置 → 输入框变空，不是变回“张三” - 服务端模板（如Jinja2）中务必转义：
value="{{ user.name|e }}"，否则引号未转义会导致value="张"三"截断
value、defaultValue和placeholder别混用
value是真实参与渲染和提交的初始值；defaultValue只在React非受控组件首次挂载时生效，之后改它无效；placeholder纯属提示文本，不影响value，也不提交。
- 错误做法：
<input placeholder="user@example.com">——用户没输内容，后端收到的是""，不是邮箱 - React受控组件必须配
onChange：<input value="{name}" onchange="{e"> setName(e.target.value)} />，否则输入框变只读 - React非受控组件用
defaultValue，但initialName后续变化不会更新输入框，容易误判为“没刷新”
不同类型表单控件的默认值写法差异
不是所有控件都靠value设默认值：text/password/email等用value；checkbox/radio靠checked；<select></select>靠<option selected></option>；<textarea></textarea>要把内容写在标签体内，不能用value属性。
-
<input type="checkbox" name="agree" value="1" checked>—— 默认勾选，提交值为"1" <select name="role"><option value="admin">管理员</option> <option value="user" selected>普通用户</option></select>-
<textarea name="bio">这是默认内容</textarea>——value="xxx"在这里完全无效 - type="date"或type="number"对格式敏感：
value="2026-08-13"合法，value="13/08/2026"会渲染为空
动态填值要注意执行时机和框架接管
从URL参数或localStorage自动填值，得等DOM就绪，且避开框架（Vue/React）的响应式接管，否则刚设完就被覆盖。
- 取URL参数示例：
const name = new URLSearchParams(window.location.search).get('name');，再赋给document.querySelector('input[name="username"]').value - 读localStorage要
try/catch：Safari隐私模式下localStorage.getItem()可能直接抛错 - React/Vue中不要混合使用：比如Vue里写了
v-model="name"，又手动el.value = "xxx"，结果不可预测 - 编辑页场景下，后端返回的字段值必须原样进state，别用
?? ''兜底——空字符串可能是合法业务值
最易被忽略的一点：reset()永远只认HTML attribute里的value，哪怕你用JS改了100次input.value，它也只记得最初那一行HTML。调试时先看getAttribute('value')，再比对value，能省掉一半排查时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
