value是唯一能设置文本输入框默认值的标准方式，placeholder仅为视觉提示；value决定初始内容、提交值和重置目标，而placeholder不参与表单数据流。
value 属性是唯一能真正设置文本输入框默认值的方式，placeholder 只是视觉提示，不参与提交、不触发重置、不能替代它。
为什么 value 是唯一标准，而 placeholder 不行
浏览器把 value 当作字段的初始内容、提交值和 form.reset() 的恢复目标；placeholder 仅在输入框为空且未聚焦时显示，一点击就消失，后端完全收不到。常见翻车：后端没收到字段值，排查发现前端只写了 placeholder="admin"，value 根本没设。
-
value="admin@example.com"→ 页面加载即显示，提交时发这个字符串，点重置按钮也变回它 -
placeholder="admin@example.com"→ 灰色文字，焦点进入后立刻清空，提交时该字段为空字符串（除非用户手动输入） - 两者可共存：
<input value="admin" placeholder="用户名">，语义清晰互不干扰
value 在不同 type 下的格式陷阱
类型敏感，错一点就静默失效——浏览器不会报错，但输入框显示为空或回退到 placeholder。
-
type="date"：必须是YYYY-MM-DD格式，new Date().toISOString().split('T')[0]是安全生成方式；20/05/2024或2024/05/20都会被忽略 -
type="number"：只能是纯数字字符串，value="1234"✅，value="1,234"❌，value="1234px"❌ -
type="email"：格式不要求严格校验，但含非法字符（如空格、中文）可能导致部分浏览器清空显示 -
type="text"最宽容，但仍需 HTML 转义：原始值为O'Reilly，必须写成value="O'Reilly"，否则引号提前截断标签
动态设置默认值时，别碰 setAttribute('value', ...)
页面加载后想从 URL 参数、localStorage 或 API 填值，必须操作 DOM 元素的 value property，不是 HTML attribute。用 setAttribute 看似生效，但后续用户输入再提交，可能仍发旧值——因为浏览器已将当前值与 HTML 属性脱钩。
立即学习“前端免费学习笔记（深入）”；
- 正确：
document.getElementById('name').value = '李四'（原生）或$('#name').val('李四')（jQuery） - 错误：
el.setAttribute('value', '李四')→ 初始渲染可能显示，但交互后行为不可靠 - 执行时机必须在
DOMContentLoaded后，否则元素还没挂载 - 若输入框被 Vue/React 管理，光改
value不够，还得触发事件：el.dispatchEvent(new Event('input', { bubbles: true }))
表单重置（reset()）只认 HTML 初始 value，不认 JS 改过的值
这是最常被忽略的细节：点 <button type="reset"> 或调用 form.reset()，浏览器只会把每个字段恢复成**最初解析 HTML 时的 value 属性值**，不是你后来用 JS 设置的 el.value。
- HTML 写
<input value="张三">→ JS 执行el.value = "李四"→ 点重置 → 输入框变空，不是变回“张三” - 验证方式：
el.getAttribute('value')返回初始 HTML 值，el.value返回当前值，两者常不一致 - 如需 JS 动态初始值 + 可靠重置，建议提前存一份：
el.dataset.initial = data.name，再监听reset事件恢复：el.value = el.dataset.initial || ""
