占位符

显示在输入框中的临时提示文本,用于向用户展示输入内容的格式或示例。用户开始输入后自动消失。

占位符 (placeholder) 是文本输入框为空时显示的浅灰色提示文字。在 HTML 中通过 <input placeholder="例: zhangsan@example.com"> 来设置。当用户点击输入框开始输入时,占位符自动消失;输入内容清空后又会重新显示。

占位符的主要作用是向用户传达输入的格式和期望内容。仅有「手机号」这个标签,用户无法判断是否需要加区号、是否需要加连字符。如果在占位符中显示「138-0000-0000」,期望的格式便一目了然。

但是,用占位符替代标签在无障碍访问方面存在问题。用户开始输入后占位符就会消失,导致用户无法回忆「这个输入框应该填什么」。对于有认知障碍的用户,或在多个输入框之间来回切换的场景中,这个问题尤为突出。WCAG (Web 内容无障碍指南) 建议将占位符仅作为辅助信息使用,标签 (<label>) 必须另行设置。

占位符的字符数在实务中也有限制。移动端设备的输入框宽度较窄,过长的占位符会被截断显示。一般建议占位符控制在 20-30 个字符以内。中文由于是全角字符,实际上限大约在 10-15 个字符左右。

在编程语境中,占位符还用于模板引擎和 SQL 的参数绑定。SQL 中的 SELECT * FROM users WHERE name = ? 里的「?」就是占位符,在执行时被替换为实际的值。这种机制是防止 SQL 注入攻击的重要安全手段。

从字符计数的角度看,占位符文本不是输入值,因此不应计入表单的字符计数器。然而,占位符本身的字符数设计直接影响用户体验。比起「请输入您的姓名」(7 个字),用「张三」(2 个字) 这样的具体示例作为占位符,更简短也更直观。

分享这篇文章