占位符VS标签用于输入HTML5 [英] Placeholder VS Label for input in HTML5

问题描述

我正在制作一个带有多个输入的表单，我需要在输入本身中给出表单元素的标签，并且我正在使用这样的元素。

例如

 < form class =TTWForm> 
< input type =emailname =emailrequired =requiredplaceholder =Email Address> 
< / form> 
  

以上代码在HTML5的W3C验证程序中有效。

在HTML 5中不需要标签

如果我使用HTML5 Placeholder 在 input 中显示标签，

标签还需要占位符使其与屏幕阅读器兼容？

解决方案

。有效的HTML仍然可能无法访问或不太理想。标签仍然很重要，HTML5 placeholder 不能替代它们。请参阅 H44：使用标签元素将文本标签与表单控件关联一个href =http://www.w3.org/TR/WCAG-TECHS/Overview.html =nofollow noreferrer> WCAG 2 Techniques 。如果您的布局要求该标签对于有视力的用户不可见，您可以随时添加该标签，但将其移至屏幕外并带有负边距/文本缩进。

更新：

一些测试结果在占位符 和关于使用占位符而不使用标签的W3公共HTML邮件列表的讨论。

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?

解决方案

HTML validators will not check accessibility. Valid HTML can still be inaccessible or less than optimal. Labels are still important and HTML5 placeholder is 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 placeholder and a discussion on the W3 Public HTML mailing list about using placeholder without label.

这篇关于占位符VS标签用于输入HTML5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！