value是提交时真正发送的数据，placeholder仅为视觉提示且不参与提交；常见错误是混淆二者用途，导致误传提示文案或漏传必要值。
value 是提交时真正发送的数据，placeholder 只是视觉提示
表单提交后后端收到的值，只来自 value（或用户输入后修改的值），placeholder 完全不参与序列化。常见错误是把“请输入手机号”这种引导文案写进 value，结果表单一提交，后端就收到了一串提示文字；反过来，想让编辑页带出已有数据，却只写了 placeholder，导致字段为空提交。
关键判断标准：value 决定“有没有值、是什么值”，placeholder 只决定“用户还没输的时候，看起来像什么”。二者职责不重叠，也不能互相替代。
哪些场景必须用 value，哪些只能用 placeholder
value 必须用于以下情况：
- 服务端渲染页面时预填已有数据（如用户资料编辑页）
-
<input type="checkbox">或<input type="radio">—— 没有value就无法识别选中项 - 动态设置默认值（比如根据 URL 参数填充搜索框）
placeholder 仅适用于纯提示场景：
立即学习“前端免费学习笔记（深入）”；
- 输入类型为
text、email、password、search等支持该属性的控件 - 不能用于
<textarea>的初始内容（得靠标签内文本），也不能用于<select> - 当字段本应为空（如新建表单），但需要降低用户理解门槛时
JavaScript 动态设置时，别用 setAttribute('value', ...)
用 element.value = 'xxx' 直接赋值，才能确保表单状态同步（比如触发 change 事件、影响 form.elements 序列化结果）。而 element.setAttribute('value', 'xxx') 只改了 HTML 属性，不会更新 DOM 的实时值，在部分浏览器中会导致表单提交时仍发旧值。
特别注意：<textarea> 的初始内容必须写在开始与结束标签之间，不能靠 value 属性；<select> 的预选中靠的是匹配子 <option value="xxx"> 的值，不是文本内容。
placeholder 和 value 同时存在时，谁生效
如果 value 有值（哪怕为空字符串 ""），placeholder 就不会显示。只有当 value 为 undefined 或未设置时，placeholder 才可见。Vue/React 中的双向绑定（如 v-model）优先级高于 value，所以实际开发中要留意框架层是否覆盖了你手动写的 value。
容易被忽略的一点：移动端某些输入法在聚焦时会延迟隐藏 placeholder，造成视觉卡顿；若需更可控的提示逻辑，建议用 label + CSS 实现浮动标签（floating label），而非依赖 placeholder。
