HTML 属性：placeholder

**placeholder** 属性定义了表单控件在没有值时显示的文本。占位符文本应向用户简要提示应在控件中输入的数据类型。

有效的占位符文本包括一个单词或短语，暗示预期的数据类型，而不是解释或提示。占位符不能替代<label>。由于如果表单控件的值不为 null，则占位符不可见，因此使用placeholder代替<label>作为提示会损害可用性和可访问性。

以下输入类型支持placeholder 属性：text、search、url、tel、email 和 password。<textarea> 元素也支持该属性。下面的示例展示了placeholder 属性的使用，用于解释输入字段的预期格式。

注意：placeholder 属性不能包含任何换行符 (LF) 或回车符 (CR)。如果值中包含任何一个，占位符文本将被截断。

无障碍访问问题

占位符仅应用于显示应在表单中输入的数据类型的示例；切勿将其用作<label> 元素的替代品；这样做会损害可访问性和用户体验。

<label> 文本在视觉上和程序上与其对应的表单控件相关联。屏幕阅读器默认情况下不会宣布占位符内容，但会宣布标签内容；标签是告知辅助技术用户应在控件中输入什么数据的关键。标签还能提升使用指向设备的用户体验：当用户点击、触摸或轻触<label> 时，焦点将移动到标签关联的表单控件上。

即使对于不依赖辅助技术的用户，也不能将占位符作为标签的替代品。占位符文本显示的颜色对比度低于默认表单控件文本。这是设计使然，因为您不希望用户混淆占位符文本和已填写的表单字段。但是，这种对比度不足可能会导致低视力用户遇到问题。此外，当用户开始输入文本时，占位符文本会从表单字段中消失。如果占位符文本包含消失的说明信息或示例，则可能会让患有认知障碍的用户感到困惑，并且如果占位符包含标签，则会使表单无法访问。

示例

HTML

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-placeholder
HTML 标准
# attr-textarea-placeholder

浏览器兼容性

html.elements.input.placeholder

BCD 表格仅在启用 JavaScript 的浏览器中加载。

html.elements.textarea.placeholder

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅