占位符

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

占位符 (placeholder) 是文本输入框为空时显示的浅灰色提示文字。在 HTML 中像 <input placeholder="例: zhangsan@example.com"> 这样,把提示文字写进 placeholder 属性里。当用户点击输入框开始输入时,占位符会自动消失;输入内容清空回到空的状态后,它又会重新显示出来。

占位符的主要作用是向用户传达输入的格式和期望内容。仅有"手机号"这一个标签,用户无法判断要不要加 +86 这样的国家代码、要不要加连字符。如果在占位符中显示"138-0000-0000",期望的格式便一目了然。

但是,用占位符代替标签在无障碍访问方面是有问题的。屏幕阅读器不会把占位符当作标签来处理,因此使用辅助技术的用户有时无法得知输入框的用途。另外,由于用户一开始输入,占位符的显示就会消失,于是还存在这样的问题:在提交之前没法再确认"这个输入框本来该填的是什么"。在需要在多个输入框之间来回切换的场景里,影响尤其大。W3C 的 WAI 公开的表单教程明确写着占位符不能替代标签,并把成功准则 3.3.2 标签或说明 (A 级) 列为相关的要求。占位符只应停留在辅助信息的位置,标签 (<label>) 必须另行设置。

颜色对比度也是容易被忽略的一点。浏览器默认的占位符颜色很浅,可能达不到成功准则 1.4.3 对比度 (最低) (AA 级) 对常规尺寸文字所要求的 4.5:1。同一篇教程给出的白色背景下的示例是 #767676,这个组合的对比度约为 4.5:1。

占位符的字符数在实务中也有制约。超出输入框宽度的部分不会显示出来,因此在框子较窄的移动端设备上,过长的占位符会在中途被截断。判断的依据不是某个字符数的参考值,而是在设想的最小宽度设备上能不能看到全文。中文的全角字符所占的宽度大约是半角字符的 2 倍,所以同样的字符数会比英文数字更早被截断。一旦被截断就会改变意思的说明,应该从占位符移到标签或辅助文字里。

在编程语境中,占位符还用于模板引擎和 SQL 的参数绑定。SQL 中 SELECT * FROM users WHERE name = ? 里的 "?" 就是占位符,在执行时被替换为实际的值。由于值不会与 SQL 语句的代码部分拼接在一起,而是另行交给数据库一侧去处理,这就成了针对 SQL 注入攻击的基本对策。不过能被替换掉的只有值,表名和列名这类标识符没法做成占位符。像排序的键要由外部输入来决定这样的场景,需要把接受的标识符与事先定好的清单做比对。

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

分享这篇文章