HTML5 中用于输入的占位符 VS 标签

Posted 2023-05-07

【中文标题】HTML5 中用于输入的占位符 VS 标签

【英文标题】：Placeholder VS Label for input in HTML5

【发布时间】：2012-02-27 19:05:30

【问题描述】：

我正在制作一个具有多个输入的表单，我需要在输入本身内部提供表单元素标签，我正在使用这样的

一个例子

<form class="TTWForm">
<input type="email" name="email" required="required" placeholder="Email Address">     
</form>

以上代码在 html5 的 W3C 验证器中有效。

Label 在 HTML 5 中不需要吗？

如果我使用 HTML5 Placeholder 在 input 中显示标签，可以吗？

是否仍需要 label 和 placeholder 才能使其兼容屏幕阅读器？

【问题讨论】：

AppleGrew和SteveAx答案都非常好。要完成，占位符属性的另一个问题是，对于键盘用户，它显示的值将在从上一个链路跳跃后，只要输入获取焦点就会消失。如果没有标签，他们会盯着空白输入，并且必须猜测他们被要求提供什么。

【参考方案1】：

HTML 验证器不会检查可访问性。有效的 HTML 仍可能无法访问或不是最佳的。标签仍然很重要，HTML5 placeholder 不能替代它们。请参阅WCAG 2 Techniques 中的H44: Using label elements to associate text labels with form controls。如果您的布局要求标签对有视力的用户不可见，您始终可以包含标签，但将其移出屏幕并使用负边距/文本缩进。

更新：

一些test result on placeholder 和一个discussion on the W3 Public HTML mailing list about using placeholder without label。

【讨论】：

谢谢。此答案应明确标记为正确。

【参考方案2】：

Placeholder 不能替代Label，所以我猜对于屏幕阅读器，它应该存在或至少设置title 属性。 Ref

为了跨浏览器的兼容性，您需要使用 javascript。结帐http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html。

【参考方案3】：

本质上，这取决于您网页的目标是什么：

Placeholders in Form Fields Are Harmful

我更喜欢“可能有害”...假设我正在创建一种视听体验，例如在浏览器中运行的游戏，标签的使用将不利于布局和有视觉障碍的人（或其他人) 可能无论如何都无法享受游戏。将游戏淡化到任何有任何障碍的人都可以享受它的地步，这需要我拥有一个团队，该团队至少由一个每种类型的障碍的人组成，以确保每个人都能获得正确的体验。大部分内容会在大多数地方被删减以适应，整个体验会因此而改变。

我认为这取决于您想要实现的目标，但您可以自行决定，但这肯定回答了我关于此事的问题