直接在标签中设置value属性即可定义初始值，该行为由html原生支持；需注意空格、大小写、引号转义、框架受控逻辑冲突、value与defaultvalue区别、js动态赋值后重置异常及safari隐私模式下localstorage异常等细节。
直接在 <input> 标签里写 value 属性就行
浏览器渲染时，只要 <input> 元素带了 value 属性（且非空字符串），就会自动显示为初始值。这个行为是 HTML 原生支持的，不需要 JS 干预。
常见错误现象：value=" hello " 会把前后空格也当初始值；value 写成 Value 或 VALUE 在某些严格解析环境（如 XHTML）下可能失效；服务端模板里忘了转义引号导致 HTML 结构崩坏。
- 纯静态页面：直接写
<input type="text" value="张三"> - 后端模板（如 Jinja2、Thymeleaf）：确保变量已转义，例如 Jinja2 中用
<input value="{{ user.name|e }}"> - React/Vue 等框架中不要混用：比如 React 里设了
value属性但没配onChange，会导致输入框变成只读（受控组件逻辑强制要求）
value 和 defaultValue 别搞混
value 是当前值，影响渲染和表单提交；defaultValue 只在首次渲染时起作用，之后修改它不会更新输入框内容（仅用于非受控组件的“初始快照”）。
使用场景：React 中若想让输入框可编辑又保留初始值，应优先用 value + 状态管理；若用 defaultValue，后续状态变化完全不影响输入框，容易误以为“没更新成功”。
- 正确（受控）：
<input value="{name}" onchange="{e"> setName(e.target.value)} /> - 不推荐（非受控但想动态改初值）：
<input defaultvalue="{initialName}">—— initialName 后续变，输入框不会响应 - 注意：原生 JS 操作时，
input.value = "xxx"改的是当前值，不是defaultValue，也不会触发input事件
从 URL 参数或 localStorage 自动填入初始值
用户刷新页面后还想保留上次输入，就得绕过纯 HTML 的静态 value，用 JS 主动设置。
性能影响小，但要注意执行时机：DOM 加载完成前就操作 input.value 会失败；如果表单被 JS 框架（如 Vue）接管，直接 DOM 操作可能被覆盖。
- 取 URL 参数示例：
const name = new URLSearchParams(window.location.search).get('name');，然后document.querySelector('input[name="username"]').value = name || ''; - 读 localStorage：
const saved = localStorage.getItem('form-username');，再赋值，记得加|| ''防止null被转成字符串 "null" - 兼容性提醒：Safari 隐私模式下 localStorage 可能抛错，需 try/catch
表单重置（<button type="reset"></button>）会清成 value 值，不是空
很多人以为点重置按钮会清空输入框，其实它恢复的是 HTML 中写的 value 属性值 —— 如果你写了 value="默认用户名"，点重置后就变回那个值，不是空。
容易踩的坑：后台返回数据后用 JS 动态设置了 input.value，但没同步更新 input.setAttribute('value', ...)，此时点重置仍会回到旧的 HTML value，造成数据不一致。
- 想重置为空：要么不写
value属性（靠 JS 初始化），要么重置前手动清空value属性：el.removeAttribute('value') - 或者监听
reset事件，用 JS 强制设空：form.addEventListener('reset', () => el.value = '') - 注意：
reset事件在表单元素上触发，不是按钮上
value 属性同时存在、URL 参数未 decodeURIComponent 导致中文乱码、以及重置行为不符合用户预期这三点。
