**placeholder** 属性定义了表单控件在没有值时显示的文本。占位符文本应向用户简要提示应在控件中输入的数据类型。
有效的占位符文本包括一个单词或短语,暗示预期的数据类型,而不是解释或提示。占位符不能替代<label>。由于如果表单控件的值不为 null,则占位符不可见,因此使用placeholder代替<label>作为提示会损害可用性和可访问性。
以下输入类型支持placeholder 属性:text、search、url、tel、email 和 password。<textarea> 元素也支持该属性。下面的示例展示了placeholder 属性的使用,用于解释输入字段的预期格式。
注意:placeholder 属性不能包含任何换行符 (LF) 或回车符 (CR)。如果值中包含任何一个,占位符文本将被截断。
无障碍访问问题
占位符仅应用于显示应在表单中输入的数据类型的示例;切勿将其用作<label> 元素的替代品;这样做会损害可访问性和用户体验。
<label> 文本在视觉上和程序上与其对应的表单控件相关联。屏幕阅读器默认情况下不会宣布占位符内容,但会宣布标签内容;标签是告知辅助技术用户应在控件中输入什么数据的关键。标签还能提升使用指向设备的用户体验:当用户点击、触摸或轻触<label> 时,焦点将移动到标签关联的表单控件上。
即使对于不依赖辅助技术的用户,也不能将占位符作为标签的替代品。占位符文本显示的颜色对比度低于默认表单控件文本。这是设计使然,因为您不希望用户混淆占位符文本和已填写的表单字段。但是,这种对比度不足可能会导致低视力用户遇到问题。此外,当用户开始输入文本时,占位符文本会从表单字段中消失。如果占位符文本包含消失的说明信息或示例,则可能会让患有认知障碍的用户感到困惑,并且如果占位符包含标签,则会使表单无法访问。
示例
HTML
<form action="/en-US/docs/Web/HTML/Attributes/placeholder"> <label for="name">Enter your name:</label> <input type="text" id="name" name="name" placeholder="e.g. Mike Shinoda" /> <button type="submit">Submit</button> </form>
结果
规范
规范HTML 标准# attr-input-placeholderHTML 标准# attr-textarea-placeholder浏览器兼容性
html.elements.input.placeholder
BCD 表格仅在启用 JavaScript 的浏览器中加载。
html.elements.textarea.placeholder
BCD 表格仅在启用 JavaScript 的浏览器中加载。