HTML 属性：placeholder

placeholder 属性定义当控件没有值时在表单控件中显示的文本。占位符文本应向用户提供关于应输入控件的预期数据类型的简短提示。

¥The placeholder attribute defines the text displayed in a form control when the control has no value. The placeholder text should provide a brief hint to the user as to the expected type of data that should be entered into the control.

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

¥Effective placeholder text includes a word or short phrase that hints at the expected data type, not an explanation or prompt. The placeholder must not be used instead of a <label>. As the placeholder is not visible if the value of the form control is not null, using placeholder instead of a <label> for a prompt harms usability and accessibility.

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

¥The placeholder attribute is supported by the following input types: text, search, url, tel, email, and password. It is also supported by the <textarea> element. The example below shows the placeholder attribute in use to explain the expected format of an input field.

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

¥Note: The placeholder attribute can't include any line feeds (LF) or carriage returns (CR). If either is included in the value, the placeholder text will be clipped.

无障碍问题

¥Accessibility concerns

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

¥Placeholders should only be used to show an example of the type of data that should be entered into a form; never as a replacement for a <label> element; doing so harms accessibility and user experience.

<label> 文本以视觉方式和编程方式与其相应的表单控件相关联。默认情况下，屏幕阅读器不会播报占位符内容，但会播报标签内容；它是告知辅助技术用户应在控件中输入哪些数据的标签。标签还可以改善指点设备用户的用户体验：当用户单击、触摸或点击 <label> 时，焦点将移动到标签的关联表单控件。

¥The <label> text is visually and programmatically associated with its corresponding form control. Screen readers don't announce placeholder content by default, but they do announce label content; it's the label that informs assistive technology users what data should be entered in the control. Labels also improve user experience for users of pointing devices: When a user clicks, touches, or taps a <label>, focus is moved to the label's associated form control.

即使对于那些不依赖辅助技术的人来说，也不能依赖占位符来替代标签。占位符文本的显示颜色对比度低于默认表单控件文本。这是设计使然，因为你不希望用户对占位符文本和填写的表单字段感到困惑。然而，对比度的缺乏可能会给弱视用户带来问题。此外，当用户开始输入文本时，占位符文本将从表单字段中消失。如果占位符文本包含消失的说明信息或示例，则可能会让有认知问题的用户感到困惑，并且如果占位符包含标签，则可能会导致表单无法访问。

¥Placeholders can not be relied upon as a replacement for a label even for those not relying on assistive technology. Placeholder text is displayed at lower color contrast than the default form control text. This is by design, as you don't want users to be confused by what is placeholder text versus what is a filled-in form field. However, this lack of contrast can cause issues for low-vision users. Additionally, placeholder text disappears from form fields when users start entering text. If the placeholder text contains instructional information or examples that disappear, it can be confusing to users with cognitive issues and can make the form inaccessible if the placeholder contained the label.

示例

¥Example

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>

结果

¥Result

规范

Specification
HTML Standard
# attr-input-placeholder

¥Specifications

浏览器兼容性

¥Browser compatibility

html.elements.input.placeholder

BCD tables only load in the browser

html.elements.textarea.placeholder

BCD tables only load in the browser

也可以看看

¥See also