HTML5中输入框的Placeholder和Label有什么区别？

Question

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

一个例子

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

上面的代码在HTML5的W3C验证器中是有效的。

在HTML5中，label不再是必需的吗？

如果我在使用HTML5的placeholder在input中显示标签，这样做可以吗？

为了使屏幕阅读器兼容，是否仍然需要使用label和placeholder一起使用？

- Jitendra Vyas

---

AppleGrew和steveax的回答都非常不错。为了完整起见，占位符属性的另一个问题是，对于键盘用户来说，在跳转到最后一个链接后，它显示的值将在输入获得焦点后消失。如果没有标签，他们将盯着空白的输入框，并且必须猜测被要求输入什么。 - FelipeAls

Answer 1

HTML验证器不会检查可访问性。即使是有效的HTML，也可能无法访问或不太理想。标签仍然很重要，HTML5的placeholder不能替代它们。请参见H44：使用标签元素将文本标签与表单控件相关联以了解WCAG 2技术。如果您的布局要求标签对有视障用户不可见，您可以始终包括标签，但通过负边距/文本缩进将其移出屏幕。

更新： 一些测试结果关于placeholder和在W3公共HTML邮件列表上讨论使用placeholder而不使用label。

- steveax

---

谢谢。这个答案显然应该标记为正确的。 - dschu

Answer 2

"Placeholder不能替代Label，所以我猜对于屏幕阅读器来说，应该存在或至少设置title属性。参考文献

为了跨浏览器兼容性，您需要使用JavaScript。查看http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html进行修复。

"

- AppleGrew

Answer 3

本质上，这取决于您页面的目标：

表单字段中的占位符是有害的

我更喜欢说'可能有害'...比如，如果我正在创建一个在浏览器中运行的音视频体验游戏，使用标签会对布局产生不利影响，而且视力受损（或其他原因）的人可能无法享受游戏。将游戏降级以使任何状况下的人都可以享受，则需要我组建一个团队，其中至少有一名成员拥有每种类型的障碍，以确保每个人都能获得正确的体验。这在大多数地方都将被削减和改变整个体验。

我认为这是根据您想要实现的目标自行决定的事情，但是这肯定回答了我的问题。

- alleycat