我倾向于尽量避免在功能之外使用ID。这就引出了我的问题，当在表单中标记项时，有多种方法。我总是用一种特定的方法来避免ID；但是，替代方法的优点和缺点是什么？一种方式对浏览器的语义意义比另一种方式更大吗？可访问性在其中如何发挥作用？
我通常的实施方法：
<form role="form" action="#" method="post" name="form" novalidate>
<label>
<span>Search</span>
<input role="search" type="search" placeholder="Search" name="s">
</label>
<button role="button" type="submit" name="s-btn">Search</button>
</form>
但是，您也可以使用
for=""并为相应字段标记ID。对于type="radio"和type="checkbox"来说，哪一个显然更好，但它是否比上面的语义值更好呢？<form role="form" action="#" method="post" name="form" novalidate>
<label for="s">Search</label>
<input role="search" type="search" id="s" placeholder="Search" name="s">
<button role="button" type="submit" name="s-btn">Search</button>
</form>
您甚至可以使用WAI-ARIA来标记ID，这是用于
for=""的内聚还是独立的标记方法？<form role="form" action="#" method="post" id="Form" novalidate>
<label id="s" for="sf">Search</label>
<input role="search" aria-labelledby="s form" id="sf" type="search" placeholder="Search" name="s">
<button role="button" aria-labelledby="form" type="submit" name="s-btn">Search</button>
</form>
我想这个问题的提出是因为人们对平衡可维护性、优化、语义和可访问性的不懈追求。
最佳答案
这两种方法，将控件嵌套到标签（隐式）和使用id和for属性（显式）有不同的优点和缺点，但是我从专业人士那里看到的当前趋势是从隐式转向显式。
显式允许在文档中有更多的灵活性，HTML5允许表单控件放置在文档内的任何地方，因此在这种情况下它们是并行不悖的。
隐式不能用于复选框和无线电，因为label元素必须在输入表单控件之后，所以有一个限制。implicit几年前的浏览器支持也很差，而且seems to still have trouble with screen readers。隐式确实增加了可访问性和可用性，因为标签的大小增加了表单控件的可单击表面积。
wai aria还没有完成，而且在浏览器/屏幕阅读器支持方面也有问题，但这当然不应该阻止您在可能的情况下实现它。理想情况下，如果不受支持，它将只是默默地失败（就像html5输入与不支持html5的浏览器一样），但我会在这里保持警惕，并警惕地进行测试。不同的支持还可以有一个屏幕阅读器/浏览器/用户代理同时读取这两个内容，而不是查找wai aria，并默认为imp/exp labeling。
语义学：嗯。问10个开发人员，你会得到10个答案。但正确的答案是你是否正确地使用了表单控件？标签是否正确？正确正确的意思是它会验证并通过可访问性测试吗？在您的个人上下文中，在这个用例中，您是否为您提供给用户的交互使用了正确的控件/标签？只有你能回答后者…如果你使用时髦的原则，你不应该有任何问题。
旁注：关于避免id，在本例中，id是最优的，它们被用于功能……我假设表单控件在提交时被处理？在功能方面，我可能错了，但是在这里它们仍然是最佳的，如果你在wpo中避免使用它们：你可以使用id，只是不要在样式表中针对它们。
关于html5 - 表单标签的语义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20598510/