Html 形式标注的语义

我倾向于避免在功能之外使用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>

您甚至可以使用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允许表单控件放置在文档中的任何位置，因此在这种情况下，它们是齐头并进的

implicit不能用于复选框和收音机，因为label元素必须位于输入表单控件之后，因此有一个限制。implicit几年前的浏览器支持也很差，而且。隐式确实增加了可访问性和可用性，因为标签的大小增加了表单控件的可单击表面积

wai-aria仍然没有完成，并且在浏览器/屏幕阅读器支持方面也存在问题，但这当然不应该阻止您在可能的情况下实现它。理想情况下，如果不受支持，它只会默默地失败（就像html5输入对不支持html5的浏览器所做的那样），但我会在这里保持警惕，并警惕地进行测试。不同的支持还可以有一个屏幕阅读器/浏览器/用户代理同时读取，而不是搜索wai aria，并默认为导入/导出标签

语义：嗯。问10个开发者，你会得到10个答案。但是正确的答案是您是否正确地使用了表单控件？标签正确吗？正确和正确的意思是它会验证和通过可访问性测试吗？也就是说，在您的个人上下文中，在本用例中，您是否为您提供给用户的交互使用了正确的控件/标签？只有你能回答后一个问题……如果你使用的是时髦的原则，你应该不会有任何问题

---

旁注：关于避免ID，在这种情况下，ID是最佳的，它们用于功能…我假设表单控件是在提交时处理的？就您的预期用途而言，我对功能的看法可能是错误的，但在这里它们仍然是最佳的，如果您为了wpo而避免使用它们：您可以使用ID，只是不要在样式表中针对它们

我通常避免使用ID，以便在可能/必要时，服务器端和jquery可以自由使用它们。通常使用名称从各个表单/字段集中提交表单数据。你提出了许多正确的观点，我非常感谢你花了这么多时间来写这篇文章，以及你如何解释它的特殊性。我从不在CSS中定义ID，除非我需要在别人的文章中快速重写。但由于字段不再需要是表单的子字段，因此可能会开始冒险重新使用ID，并且在采用此方法时可能会增加一些灵活性。再次感谢！我不熟悉任何需要命名的情况，但这当然并不意味着它们不存在。如果使用得当，javascript getElementById是完美的。所以这也是一个相对的答案。哈哈，我读了一篇由一位非常优秀的开发人员撰写的文章，标题是“这取决于…”，基本上是沿着开发流程的事件链进行工作，但也从侧面进行工作，以展示各种可能的结果。这是我们的媒介；最好的建议是使用web标准开发和使用web平台技术。重新命名：在PHP中，从控件中获取值以显示在屏幕上，插入到数据库中，等等。您可以获取

名称，而不是
id
。我无法对其他语言发表评论。名称标识了哪些内容被发布回服务器，无论使用何种语言都非常确定……但现在我想知道node.js驱动的表单中使用了哪些javascript，或者具体使用了哪些javascript？呵呵。
<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>