HTML input 占位提示文字怎么加？placeholder 属性用法与注意点

在 HTML 表单里给输入框加占位提示，用的是 placeholder 属性：写在 <input> 或 <textarea> 标签上，值为灰色的提示文字，用户一输入就消失。本文把写法和几个容易忽略的注意点一次讲清。

你在做一个登录框，想让输入框里先显示「请输入手机号」这种浅色提示，用户点进去打字时它自动消失。这时候用 placeholder 最合适。但如果把它当成真正的标签用，会让用屏幕阅读器的用户完全不知道这个框要填什么。今天这篇文章，编程狮就把 HTML 表单里 placeholder 占位符的用法讲透。

一、先弄清 placeholder 和 label 不是一回事

placeholder 是输入框内的浅色提示，只作「示例/格式提醒」，用户输入时立刻消失。真正的 <label> 是输入框对外可见、可被读屏软件识别的正式名称，永远在那里。两者职责不同：label 告诉用户「这个框是什么」，placeholder 告诉用户「这里大概填成什么样」。

⚠️ 注意：不要只用 placeholder 代替 label。当输入框获得焦点、用户开始输入，placeholder 就看不见了；如果它本来承担了「字段名」的作用，用户填到一半就不知道自己在填哪一项。

如果还没系统学过表单，可以先过一遍 HTML 教程，把表单控件过一遍。

二、方案一：在 input 上加 placeholder，最常用

最常见的用法，直接在 <input> 标签写 placeholder="提示文字"。

<form>
  <input type="text" name="phone" placeholder="请输入手机号">
  <input type="email" name="mail" placeholder="例如 name@example.com">
</form>

上面这段做了什么：两个输入框各带一条灰色提示，页面渲染后框内显示浅色文字，用户点击输入时提示消失，清空后又会出现。语法细节记不住，HTML 速查手册 可以放在手边随时翻。

三、方案二：textarea 同样支持占位提示

多行文本框 <textarea> 也用 placeholder，写法和 input 完全一致，只是它放在成对的标签之间而不是自闭合标签上。

<textarea name="intro" rows="4" placeholder="用一两句话介绍一下你自己"></textarea>

placeholder 和 label 的搭配在不同控件上逻辑一致，先把这一节吃透，后面写表单会少走弯路。

想知道每个属性完整的取值，可以查 HTML 参考手册，里面按标签列出了所有合法属性。注意 placeholder 只是提示，提交表单时它的值不会被发送，所以你不能靠它当默认值。

四、方案三：用 CSS 改变占位文字样式

占位文字默认的灰色不一定符合设计，可以用 ::placeholder 伪元素改颜色和字号，但要注意保持足够对比度，别让用户看不清。

input::placeholder {
  color: #9aa0a6;
  font-size: 14px;
}

想立刻试效果，可以打开 HTML 在线运行，把上面的代码粘进去，切换输入框焦点看提示的显隐。

五、踩坑清单

三个最常翻车的地方，每个给现象、原因和办法。

• 现象：用户填到一半不知道自己在填哪个字段。原因：只用了 placeholder 当字段名。解决：补一个真正的 <label> 并 for 关联输入框。
• 现象：提示文字和正式内容分不清。原因：placeholder 写了「姓名」这种本该是标签的内容。解决：placeholder 只写示例或格式，如「如：张三」。
• 现象：提交后后端收不到提示文字。原因：placeholder 不参与表单提交。解决：默认值请用 value 属性，提示用 placeholder。

验证最直接：写一个有 placeholder 的输入框，刷新页面看提示存在，点进去输入再删除，确认提示重新出现，且提交时该值不进表单数据。预期结果（未在本机执行）是提示只在空框且未聚焦输入时显示。

实战：一个带占位提示的登录表单

把前面几点串起来，一个常见的登录框通常长这样：用户名框用 placeholder 给格式示例，真正的字段名交给 <label>；密码框除了占位提示，最好再配上 required 做必填校验。这样即使 placeholder 在用户输入后消失，读屏软件和视觉用户都还能从 label 知道该填什么。

做 HTML 表单开发时，占位提示和校验是两层独立的事：提示负责「看起来该填啥」，校验负责「提交时拦不拦」。别指望 placeholder 帮你拦空提交，它纯粹是展示层的辅助。把占位提示当「引导」，把 required、pattern 当「规则」，职责分清楚，表单体验才稳。

兼容性与可访问性底线

placeholder 属性现代浏览器都支持，兼容不用太担心，真正要守住的是可访问性底线：占位提示的对比度要够，颜色别和背景糊在一起；同时永远保留 <label>，因为读屏软件读的是 label 而不是 placeholder。

如果你的设计稿里「框内提示」和「字段名」看起来是同一行字，实现时也要拆成 label + placeholder 两层，而不是偷懒只写 placeholder。短期看省事，长期看会让无障碍用户和自动测试都抓不到字段含义。

占位提示与必填校验如何配合

占位提示解决「该填什么格式」，必填校验解决「不填不让提交」，两者配合才完整。常见写法是 input 同时带 placeholder 和 required，用户没填就提交时，浏览器会弹出默认提示拦下。你也可以用 pattern 进一步约束格式，比如手机号框加 pattern="[0-9]{11}"，用户填错格式也会被拦。

注意 placeholder 不会被 required 当成已填值：即使框里显示着占位提示，只要用户没真实输入，提交时仍算空。所以在 HTML 表单里，占位提示永远替代不了真实输入，它只是引导，真正的「有没有值」由用户决定。

这个特性有它的 边界：它只是提示、不参与表单提交，所以更 适用 于引导用户输入，不该当成校验。在 配置 表单时，记得 检查 是否配了真正的 label；如果 失败 地只留 placeholder，读屏用户会读不到字段名。另外出于 安全 考虑，敏感默认值也不要写进提示文字里。

总结

HTML 表单的占位提示靠 placeholder 属性实现，写法简单、input 和 textarea 都支持，还能用 ::placeholder 改样式。关键是记住它只是「示例提示」，永远不能替代 <label> 这个正式字段名，也不能当默认值提交。

要点带走：

• placeholder 是框内灰色提示，输入即消失；
• label 才是正式字段名，必须保留；
• 默认值用 value，提示用 placeholder，别混用。

下一步可以看看表单校验 required 和 pattern，把「提示 + 校验」组合成完整的输入体验。

延伸学习

想把这块知识系统补齐，可以按这个顺序来：

1. 先过一遍 HTML 入门课程，把表单与控件体系铺平；
2. 想看真实设置示例，翻 用 placeholder 设置 input 提示信息；
3. 想边学边练，HTML 基础实战课程 适合巩固。

常见问题

Q：placeholder 能代替 label 吗？

A：不能。placeholder 在用户开始输入后就消失，也无法被读屏软件稳定识别为字段名。正式字段名必须用 <label>，placeholder 只承担示例和格式提醒。

Q：placeholder 的值会提交到后端吗？

A：不会。placeholder 只是显示提示，表单提交时它的值不会被发送。如果你需要真正的默认值，应该用 value 属性。

Q：怎么修改占位文字的颜色？

A：用 CSS 的 input::placeholder 伪元素设置 color 等样式。注意保留足够对比度，别把提示调得几乎看不见，那会影响可用性。