value是提交时真正发送的数据，placeholder仅为视觉提示且不参与提交；常见错误是混淆二者用途，导致误传提示文案或漏传必要值。

value 是提交时真正发送的数据，placeholder 只是视觉提示

表单提交后后端收到的值，只来自 value（或用户输入后修改的值），placeholder 完全不参与序列化。常见错误是把“请输入手机号”这种引导文案写进 value，结果表单一提交，后端就收到了一串提示文字；反过来，想让编辑页带出已有数据，却只写了 placeholder，导致字段为空提交。

关键判断标准：value 决定“有没有值、是什么值”，placeholder 只决定“用户还没输的时候，看起来像什么”。二者职责不重叠，也不能互相替代。

哪些场景必须用 value，哪些只能用 placeholder

value 必须用于以下情况：

• 服务端渲染页面时预填已有数据（如用户资料编辑页）
• <input type="checkbox"> 或 <input type="radio"> —— 没有 value 就无法识别选中项
• 动态设置默认值（比如根据 URL 参数填充搜索框）

placeholder 仅适用于纯提示场景：

稿定抠图

一款基于AI自动识别主体并移除图片背景的在线抠图工具，可快速制作透明背景素材和进行后续图片设计。

下载

• 输入类型为 text、email、password、search 等支持该属性的控件
• 不能用于 <textarea></textarea> 的初始内容（得靠标签内文本），也不能用于 <select></select>
• 当字段本应为空（如新建表单），但需要降低用户理解门槛时

JavaScript 动态设置时，别用 setAttribute('value', ...)

用 element.value = 'xxx' 直接赋值，才能确保表单状态同步（比如触发 change 事件、影响 form.elements 序列化结果）。而 element.setAttribute('value', 'xxx') 只改了 HTML 属性，不会更新 DOM 的实时值，在部分浏览器中会导致表单提交时仍发旧值。

特别注意：<textarea></textarea> 的初始内容必须写在开始与结束标签之间，不能靠 value 属性；<select></select> 的预选中靠的是匹配子 <option value="xxx"></option> 的值，不是文本内容。

placeholder 和 value 同时存在时，谁生效

如果 value 有值（哪怕为空字符串 ""），placeholder 就不会显示。只有当 value 为 undefined 或未设置时，placeholder 才可见。Vue/React 中的双向绑定（如 v-model）优先级高于 value，所以实际开发中要留意框架层是否覆盖了你手动写的 value。

容易被忽略的一点：移动端某些输入法在聚焦时会延迟隐藏 placeholder，造成视觉卡顿；若需更可控的提示逻辑，建议用 label + CSS 实现浮动标签（floating label），而非依赖 placeholder。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！