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

表单元素的 value 和 placeholder 本质不同

它们不是“都能填默认文字”的两个可互换选项，而是承担完全不同的职责：value 是用户提交时真正发送的数据（哪怕用户没改过），而 placeholder 只是视觉提示，提交时不会被包含，且用户一聚焦输入框就会消失。

常见错误是把引导性文案（比如“请输入邮箱”）写进 value，结果表单一提交就发了“请输入邮箱”过去；或者反过来，想让某个字段带初始值却只写了 placeholder，导致后端收不到任何值。

value 预填充：适用于有确定初始数据的场景

适合服务端渲染页面、编辑已有记录、或前端根据逻辑动态设定默认值。它会参与表单序列化和提交。

• value 在 <input>、<textarea>、<select> 中都有效，但语义不同：<select> 的 value 匹配的是子 <option> 的 value 属性值，不是文本内容
• 用 JavaScript 动态设置时，应操作 element.value（而非 setAttribute('value', ...)），否则可能在某些浏览器中不触发表单状态更新
• 对于 <textarea>，预填充内容必须写在开始与结束标签之间，不能用 value 属性：

  <textarea>默认内容</textarea>

placeholder 仅作提示：别指望它传数据

它的唯一作用是降低认知门槛，告诉用户“这里该填什么类型的内容”。它不参与任何数据流，也不影响表单验证逻辑（除非你额外写 JS 判断）。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• placeholder 不支持换行，遇到 \n 会被忽略；若需多行提示，只能用外部 <label> 或浮动提示组件
• 在屏幕阅读器中，placeholder 默认不被朗读（WAI-ARIA 规范建议避免依赖它做唯一提示），务必搭配 <label for="...">
• 不要用 placeholder 替代 label——没有 label 的表单对键盘导航和辅助技术极不友好

两者混用时的典型陷阱

最常出问题的是“用户没输入就提交”，比如注册页邮箱字段同时设了 value="请输入邮箱" 和 placeholder="example@domain.com"。这时用户没动输入框，提交的就是那句提示语。

• 如果字段允许为空，又需要提示，就只用 placeholder + 正确的 <label>，value 留空
• 如果字段必须有值，且有合理默认（如用户地区、时区），才用 value；此时 placeholder 可选，但文案要和 value 区分，例如 value="zh-CN" 对应 placeholder="选择您的语言"
• 用 JavaScript 清空 placeholder 类似效果时，别误删 value——尤其注意事件监听写在 input 还是 focus 上

真正难的不是怎么写，而是每次加表单字段时，先问自己一句：这个“默认文字”，是用户没改就该发给后端的，还是纯属帮用户看懂的？答案决定了该动 value 还是 placeholder。