placeholder 是 HTML5 引入的一个表单属性，专门用来给输入框提供默认提示文字。当输入框内容为空且未获得焦点时，这段提示文字会以较浅的颜色显示在输入框内部；一旦用户开始输入，提示文字自动消失，不会干扰正常的内容填写。这个小细节在表单设计中非常实用，能够清晰地告诉用户每个输入框的期望内容、格式要求或者示例数据，显著降低填写的出错率。本文将从基础用法、样式定制、常见误区和文案技巧几个方面，详细讲解如何用好这个属性。
placeholder 属性的基础用法
placeholder 属性可以直接写在大多数表单控件上，比如 <input> 和 <textarea> 标签。它的值就是一段普通文本，浏览器会自动处理显示和隐藏的逻辑，不需要编写任何 JavaScript 代码。最简单的写法如下：
<input type="text" placeholder="请输入用户名"> <input type="email" placeholder="example@ipipp.com"> <textarea placeholder="请输入留言内容，不超过 200 字"></textarea>
使用时有几个特性需要了解。第一，placeholder 的值不会随表单提交，它只是视觉提示，不参与实际数据传输。第二，placeholder 会在输入框获得焦点或输入内容后消失，所以它不能承载用户必须长期记住的信息。第三，placeholder 属性中不能包含 HTML 标签，写 <br> 之类的标签会被当作纯文本显示，换行需求在部分浏览器中可以用 \n 实现，但兼容性并不理想，不建议依赖。
从兼容性来看，placeholder 属性得到了所有主流浏览器的支持，包括 IE10 及以上版本，现在基本不用担心兼容问题。如果确实需要兼容极老的环境，可以通过 JavaScript 模拟：监听 focus 和 blur 事件，动态切换输入框的 value 值，不过这种方案要额外处理颜色区分和内容清理，代码量不少，除非有特殊需求，否则直接用原生属性即可。
用 CSS 自定义提示文字的样式
默认情况下，浏览器会把 placeholder 文字渲染成浅灰色，但这个颜色不一定符合页面设计稿。通过 CSS 伪元素可以自由调整它的颜色、字号和字重。由于各家浏览器早期实现不一，需要写多个前缀版本：
/* Chrome、Edge、Safari */
input::placeholder {
color: #999999;
font-size: 14px;
letter-spacing: 1px;
}
/* Firefox 旧版本 */
input:-moz-placeholder {
color: #999999;
}
/* WebKit 旧版本 */
input::-webkit-input-placeholder {
color: #999999;
}有一点需要注意：大多数浏览器对 ::placeholder 伪元素支持 CSS 属性的能力有限，比如不允许设置背景、边框等，主要支持 color、font 系列、text-align、opacity 等文字相关属性。另外，从无障碍角度出发，提示文字与背景的对比度不宜过低。WCAG 建议文本对比度至少达到 4.5:1，那种非常淡的浅灰在光线充足的屏幕上几乎看不清，反而影响可用性。
一个常见的设计需求是让输入框获得焦点时提示文字颜色变淡或产生过渡动画，可以配合 :focus 选择器实现：
input:focus::placeholder {
color: #cccccc;
transition: color 0.3s ease;
}placeholder 不能替代 label 的常见误区
实际项目中一个高频错误是用 placeholder 完全取代 <label> 标签，输入框上只有一段灰色提示，看起来界面简洁了，但可用性会大打折扣。原因很简单：用户一点击输入框，提示文字就消失了，此时如果用户忘记了这个框要填什么，只能删掉内容才能重新看到提示，来回操作非常恼火。
从无障碍角度看，屏幕阅读器对 placeholder 的支持也不如 label 可靠，部分设备会跳过这段文字不朗读，视障用户可能完全不知道输入框的用途。正确的做法是 label 与 placeholder 各司其职：label 负责说明字段名称，长期可见；placeholder 负责提供示例或格式提示，起到锦上添花的作用。
<label for="phone">手机号码</label> <input type="tel" id="phone" placeholder="11 位手机号，如 13800138000">
此外还要注意，placeholder 不应承载必填项标识、错误提示、单位换算规则等重要信息。这些内容一旦消失，用户就失去了参考依据。错误提示应该放在输入框外部，用专门的提示区域展示。
写好提示文案的实用技巧
提示文字的质量直接影响表单的转化率。写文案时优先使用示例而非指令：与其写“请输入手机号”，不如写“例如 13800138000”，示例能让用户瞬间理解格式要求。对于有格式要求的字段，在 placeholder 中直接展示格式模板效果更好，比如日期字段写“格式：2024-01-01”，比一句“选择日期”信息量更大。
其次要控制长度。placeholder 文字过长会在小屏幕上被截断，移动端尤其明显，建议控制在 12 个汉字以内。语气上保持简洁友好，避免生硬的“必须”“禁止”等命令式措辞，这类强调可以交给字段旁的说明文字。最后，务必在真实设备上测试显示效果，不同浏览器对 placeholder 的默认样式存在细微差异，例如部分浏览器默认透明度是 0.54，即使指定了颜色也可能偏淡，可以通过显式设置 opacity: 1 来统一表现。
placeholder属性HTML输入框表单提示文字修改时间：2026-09-03 09:29:16