HTML 属性:placeholder

发布时间:2025-08-21 13:14

**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 的浏览器中加载。

另请参阅

网址:HTML 属性:placeholder https://mxgxt.com/news/view/1699678

相关内容

揭秘CSS中placeholder的神奇效果:轻松提升用户体验,让你的表单输入更智能!
【PC/浏览器汉化版/HTML游戏/2.30G】明星代言人(Star Agent) Ver0.60 浏览器汉化版+HTML游戏+2.30G
QUnit.config
JOOMI LIM
大一新生HTML期末作业,网页制作作业——明星介绍易烊千玺网站HTML+CSS
“rel=nofollow”属性
静态HTML明星主页 HTML+CSS 周杰伦明星页面(学生课程设计网页设计制作大作业)
八卦组合结构PPT关系图模板通用课件
jQuery下拉美化搜索表单效果代码分享 爱问知识人
HTML 感染 DropFileName = “svchost.exe” Ramnit 蠕虫病毒 查杀解决办法

随便看看