本文介绍了用于 HTML5 输入的占位符 VS 标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

示例

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

以上代码在 W3C 验证器中对 HTML5 有效.

And above code is Valid in W3C validator for HTML5.

Label 在 HTML 5 中不需要吗?

Does Label not require in HTML 5?

如果我使用 HTML5 Placeholderinput 中显示标签,可以吗?

If I'm using HTML5 Placeholder to show label inside input is that ok?

是否仍需要 labelplaceholder 才能使其与屏幕阅读器兼容?

Does label still required along with placeholder to make it screen reader compatible?

推荐答案

HTML 验证器不会检查可访问性.有效的 HTML 仍然无法访问或不是最佳的.标签仍然很重要,HTML5 placeholder 不能替代它们.请参阅H44:使用标签元素将文本标签与表单控件关联href="http://www.w3.org/TR/WCAG-TECHS/Overview.html" rel="noreferrer">WCAG 2 技术.如果您的布局要求标签对视力正常的用户不可见,您可以始终包含标签,但将其移出屏幕并使用负边距/文本缩进.

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.

更新:

一些 关于 placeholder 的测试结果和一个关于使用 placeholder 没有 label.

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

07-25 16:56