HTML 属性：placeholder

placeholder 属性定义了当表单控件为空值时显示的文本。占位符文本应为用户提供关于应输入到控件中的数据的预期类型的简要提示。

有效的占位符文本应包含一个词或短语，提示预期的输入类型，而不是解释或提示。占位符不得替代 <label>。由于占位符在表单控件的值不为空时不可见，因此使用 placeholder 代替 <label> 作为提示会损害可用性和可访问性。

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

注意：在 <textarea> 元素中，placeholder 属性不能包含任何换行符（LF）或回车符（CR）。如果值中包含任何一个，占位符文本将被截断。

可访问性考虑

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

<label> 文本在视觉上和程序上都与其对应的表单控件相关联。屏幕阅读器默认不会播报占位符内容，但会播报标签内容；正是标签通知了辅助技术用户应该在控件中输入什么数据。标签还能改善指针设备用户的体验：当用户单击、触摸或点击 <label> 时，焦点会移到与标签关联的表单控件上。

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

示例

HTML

html

<form action="/en-US/docs/Web/HTML/Reference/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>