占位符 vs 标签:为什么占位文字不是标签,以及该用的输入框规范
输入框里的灰色文字,在用户一开始输入时就消失了。为什么占位符无法取代标签,提示该放哪里,能通过对比度的边框颜色,以及可以直接交给开发的完整输入框规范。
占位符不是标签。用户一开始输入它就消失了,这个输入框是干什么的唯一线索也随之消失。每个输入框上方都要放一个真正的标签,提示放在下方,四周要有清晰可见的边框,占位符只用来放示例。下面是原因和具体规范。
把占位符当标签会出什么问题
输入前:看起来很干净
✕ 输入后:这个框是干嘛的来着?
左边的输入框看起来很整洁,这正是设计师喜欢它的原因。右边是同一个输入框两秒钟之后的样子。"邮箱"这个词不见了,用户没有标签可以核对,在长表单里,他们根本分不清哪个答案属于哪个输入框。
这是记忆问题,不是审美问题。Nielsen Norman Group 对表单占位符的研究发现,消失的文字会加重短期记忆负担,也让提交前检查答案变得困难。我们更全面的 表单设计最佳实践 指南覆盖了整个表单,这篇文章则深入讲解造成大部分麻烦的那一个决定。
还有第二个问题。占位文字默认是灰色,而且这种灰通常太淡。常见的占位符灰 #8E8E93 在白底上的对比度约为 3.3 比 1,低于 WCAG 对文字要求的 4.5 比 1。所以你给出的那条唯一提示,也很难读清。
修正 1:在输入框上方放真正的标签
邮箱
✓ 标签在上方:输入后依然在
工作邮箱
✓ 占位符只当示例
标签在输入框之外,所以输入永远不会碰到它。把它放在输入框上方,左对齐,15 px 半粗体。上方比侧边更好,因为它在任何宽度下都适用,包括手机,而且视线沿着表单一条直线向下移动。
不要为了省空间而隐藏标签。如果设计里没有放标签的空间,错的是设计,不是规则。聚焦时缩小到角落的浮动标签是一种折中:标签保留了,但字很小,动画时机要仔细调,而且比上方的普通标签更难做到无障碍。
屏幕阅读器朗读的也是真正的标签。在 HTML 中,把它与输入框关联起来,这样点击标签就能聚焦输入框:
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email"
placeholder="name@company.com" />
修正 2:提示放在输入框下方
密码
至少 8 个字符。
✓ 提示在下方:输入时一直都在
✕ 提示当占位符:按第一个键就没了
输入框能说的最有用的东西,比如格式或规则,恰恰是用户输入时需要的。所以它不能放在占位符里,否则第一次按键就消失了。把它移到输入框下方,13 px、颜色更淡的灰,这样它会一直可见。
错误信息用同一个位置。出问题时,提示行可以变成错误信息,布局保持稳定。我们关于 错误信息颜色 的文章讲了这条信息该是什么样子。
修正 3:用户看得见的边框
邮箱
✕ #E5E5E5 边框:幽灵
邮箱
✓ #79747E 边框:一眼就找到
输入框是一个控件,控件必须能被找到。左边那种幽灵灰边框是设计稿的最爱,因为看起来很轻盈。但在真实屏幕上它几乎消失,用户不知道该点哪里。
WCAG 1.4.11 要求识别界面组件所需的视觉信息,与相邻颜色的对比度至少为 3 比 1。白底上的 #E5E5E5 约为 1.3 比 1,不合格。#79747E 是 Material 3 的轮廓色,约 4.6 比 1,轻松通过。使用 1.5 px,这样在低密度屏幕上也能清晰显示。
注意它和分隔线的区别。像 #E5E5EA 这样的浅灰用在列表行之间完全没问题,因为分隔线只需要被注意到。而输入框边框必须被看见。我们在 浅色模式背景色 中讲过分隔线和表面灰色。
修正 4:调出正确的键盘
知道自己用途的输入框,可以在 iPhone 和 Android 上弹出合适的键盘。邮箱输入框一打开就带着 @ 键,每避免一次打错字就省一次点击。在 HTML 里只需要一个属性:
| 输入框 | Input 类型 | 手机弹出什么 |
|---|---|---|
| 邮箱 | type="email" | 带 @ 和 . 的键盘 |
| 电话 | type="tel" | 数字键盘 |
| 网址 | type="url" | 带 / 和 .com 的键盘 |
| 银行卡或验证码 | inputmode="numeric" | 数字键盘,无微调按钮 |
| 搜索 | type="search" | 键盘上的搜索键 |
再配合 autocomplete 的值,比如 email 和 name,手机就能自己填写输入框。
输入框规范
| 部分 | 数值 |
|---|---|
| 标签 | 输入框上方,15 px,半粗体 |
| 输入框 | 高 48 px,圆角 12 px |
| 边框 | 1.5 px,#79747E |
| 文字 | 16 px,绝不更小 |
| 提示 | 输入框下方,13 px |
| 占位符 | 一个示例,或什么都不放 |
文字 16 px 对 iPhone 很重要:当用户点击文字更小的输入框时,Safari 会放大页面,这感觉像是一个 bug。
.field label { font: 600 15px/1.3 system-ui; display: block; margin-bottom: 6px; }
.field input {
height: 48px;
padding: 0 14px;
font-size: 16px;
border: 1.5px solid #79747E;
border-radius: 12px;
}
.field input::placeholder { color: #8E8E93; }
.field .hint { font-size: 13px; margin-top: 6px; }
48 px 的高度提供了舒适的触控区域,12 px 的圆角是一种选择而不是规则:与你的设计系统保持一致,并让每个输入框都相同。
FAQ
我可以用占位符代替标签吗?
不可以。用户一输入占位符就消失了,输入框也就失去了名字。在输入框上方放一个可见的标签,占位符只用来放示例格式,或者留空。
占位文字符合无障碍要求吗?
默认情况下很少符合。占位文字通常是对比度低的浅灰色,输入时会消失,而且一些辅助工具不会把它当作标签。与输入框关联的真正标签才是无障碍的选择。
标签应该放在输入框上方还是里面?
放上方,左对齐。它适用于所有屏幕宽度,输入时始终可见,视线沿着一条直线向下浏览表单。
占位符里应该放什么?
放格式示例,比如 name@company.com,或者什么都不放。永远不要把用户输入时需要的说明放在那里。那应该放在输入框下方的提示里。
输入框边框应该是什么颜色?
要足够深,与页面的对比度至少达到 3 比 1,这是 WCAG 1.4.11 的要求。#79747E 是 Material 3 的轮廓色,在白底上约为 4.6 比 1。浅色的 #E5E5E5 约为 1.3 比 1,不合格。
浮动标签能解决占位符问题吗?
部分可以。它们通过缩小并放在文字上方来保持标签可见,但字号小、有动画、还要做无障碍处理,所以输入框上方的普通标签是更安全的默认选择。
来源
- Nielsen Norman Group,Placeholders in Form Fields Are Harmful(Katie Sherwin,2014):占位文字在输入时消失,加重短期记忆负担,并让答案难以检查。
- WCAG 2.1, 1.4.11 Non-text Contrast(界面组件要求 3 比 1)以及 1.4.3 Contrast (Minimum)。
- 白底上的对比度,按 WCAG 相对亮度公式计算:#E5E5E5 为 1.26 比 1,#79747E 为 4.55 比 1,占位符灰 #8E8E93 为 3.26 比 1。#79747E 是 Material 3 的 Outline(NeutralVariant50),取自 androidx Compose ColorLightTokens。
- MDN,the input element, type attribute:
type="email"会在手机上调出邮箱键盘。 - 规范表中的尺寸(15 px 标签、48 px 高度、12 px 圆角、13 px 提示)是我们自己的建议,不是平台数值。
- 最初作为轮播图发布于 UX Brainy。
Want every form in your product to feel this easy to fill in? Our team designs and builds product UI with the field details decided once.
Get Started
