html - 为什么 HTML 元素(input、textarea 和 select)应该有关联的标签？

Question

任何人都可以阐明为什么( input 、 textarea 和 select )应该有关联的标签吗？

我发现了一个 stackoverflow 线程 ( Should I put input elements inside a label element? )，它解释了关联 <input> 的所有方式。和<label> ，但我没有找到任何关于为什么必须关联标签的明确解释。

示例

WebStorm (IDE) 会为此代码中的输入生成“缺少关联标签”警告:

<div>
  <input type="text" id="search" name="search">
  <button id="logout" name="logout">Logout</button>
</div>

应用自动更正会为输入添加标签:

<div>
  <label>
    <input type="text" id="search" name="search">
  </label>
  <button id="logout" name="logout">Logout</button>
</div>

如果没有标签，HTML 也能正常工作，那我为什么要添加它呢？

Answer 1

关联标签旨在实现可访问性。因此，例如，当您在网站上运行 lightouse Chrome 检查时，它会指出其报告的“可访问性”部分中缺少的标签。原因:

“标签确保表单控件通过辅助技术(例如屏幕阅读器)正确宣布”。

因此，当您的网站可供无法正确阅读或查看内容并需要屏幕阅读器的残障人士访问时，拥有它们是很好的选择。