HTML5 中输入的占位符 VS 标签
我正在制作一个具有多个输入的表单，我需要在输入本身内部提供表单元素的标签，并且我正在使用这样的
示例
<form class="TTWForm">
<input type="email" name="email" required="required" placeholder="Email Address">
</form>
以上代码在 HTML5 的 W3C 验证器中有效。
HTML 5 中不需要 Label 吗？
如果我使用 HTML5 Placeholder 在 input 中显示标签> 可以吗？
仍然需要 label 和 placeholder 来使其与屏幕阅读器兼容吗？
I'm Making a form with multiple inputs where I need to give lable of form element inside input itself and I'm using like this
An example
<form class="TTWForm">
<input type="email" name="email" required="required" placeholder="Email Address">
</form>
And above code is Valid in W3C validator for HTML5.
Does Label not require in HTML 5?
If I'm using HTML5 Placeholder to show label inside input is that ok?
Does label still required along with placeholder to make it screen reader compatible?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
HTML 验证器不会检查可访问性。有效的 HTML 仍然可能无法访问或达不到最佳状态。标签仍然很重要，HTML5
placeholder并不能替代它们。请参阅 H44：使用标签元素将文本标签与表单控件关联起来。 href="http://www.w3.org/TR/WCAG-TECHS/Overview.html" rel="noreferrer">WCAG 2 技术。如果您的布局要求视力正常的用户看不到标签，则您始终可以包含该标签，但使用负边距/文本缩进将其移至屏幕外。更新：
一些关于
placeholder的测试结果 以及关于 W3 公共 HTML 的讨论有关使用不带label的placeholder的邮件列表。HTML validators will not check accessibility. Valid HTML can still be inaccessible or less than optimal. Labels are still important and HTML5
placeholderis not a replacement for them. See H44: Using label elements to associate text labels with form controls in the WCAG 2 Techniques. If your layout requires that the label not be visible to sighted users, you can always include the label but move it offscreen with negative margins/text-indent.Update:
Some test result on
placeholderand a discussion on the W3 Public HTML mailing list about usingplaceholderwithoutlabel.Placeholder不能替代Label，所以我想对于屏幕阅读器来说，它应该存在或者至少设置title属性。 参考为了跨浏览器兼容性，您需要使用 javascript。查看 http://www.hagenburger.net/BLOG/ HTML5-Input-Placeholder-Fix-With-jQuery.html 为此。
Placeholderis no replacement forLabelso I guess for screen reader this should be present or at least set thetitleattribute. RefFor cross browser compatibility you need to use javascript. Checkout http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html for that.
本质上，这取决于页面的目标：
表单字段中的占位符是有害的
我更喜欢“可能有害”...假设我正在创建一种视听体验，就像在浏览器中运行的游戏一样，使用标签会对布局和有视力障碍的人不利（或其他人）可能无论如何都无法享受游戏。将游戏淡化到任何有任何障碍的人都可以享受它的程度需要我拥有一个由至少一名具有每种类型的障碍的人组成的团队，以确保每个人都能获得正确的体验。为了适应，大部分内容都会在大多数地方被删除，整个体验也会因此改变。
我认为这取决于您想要实现的目标，您可以自行决定，但这确实回答了我对此事的问题
In essence it depends on what the goal of your pages is :
Placeholders in Form Fields Are Harmful
i would prefer 'can be harmful' ... say i'm creating an audiovisual-experience like a game that works in a browser, the use of labels would be detrimental to the layout and people with visual impairment (or others) might not be able to enjoy the game anyway. Downplaying the game to a point where anyone with any impairment can enjoy it would require me to have a team that consists of at least one person with one impairment of each type to make sure everyone can have the right experience. Most of it would be cut out in most places to adapt and the whole experience would change so.
I think this is something that comes at your own discretion depending on what you want to achieve , but this certainly answers my question on the matter