为什么我们在标签标签中使用“for”属性？

Question

我一直在学习 HTML 中的“for”属性及其作用，但我偶然发现了一个我尚未理解的奇怪示例

代码1

<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>

代码2

<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<br>
<label><input type="checkbox" name="personality"> Loving</label>

我理解为什么在第一个代码块中使用“for”，但我不明白为什么第二个代码在没有它们的情况下可以正常工作时隐式使用“for”和“id”。 有什么帮助吗？

Answer 1

这是正确的，没有它也可以工作。但是将标签与输入字段连接起来很有用。这对于可访问性也很重要（例如，对于盲人，阅读文本）。

浏览器还允许您单击标签并自动聚焦输入字段。

对于复选框，这也很有用。但是对于这些，您也可以像这样围绕复选框输入：

<label>
  <input type="checkbox"> I agree with the answer above.
</label>

在这种情况下，当您单击文本时会自动选中复选框。

带有标签的输入周围适用于每个输入字段。但是描述输入字段的文本应该始终在其中。 for 的用途是：当您的 HTML 不允许标签环绕时，您可以使用 for-attribute。

以下两个例子：

结构简单：

<label>
  Your Name:<br>
  <input type="text"/>
</label>

输入字段周围的复杂结构：

<div class="row">
  <div class="col">
    <label for="name">Your Name:</label>
  </div>
  <div class="col">
    <input type="text" id="name" />
  </div>
</div>

Answer 2

它可以在没有 "for" 属性的情况下使用，它会很好，根据to docs。 这只是如何使用 "for" 来省略令人困惑的开发人员的一种选择。 无论如何，如果在标签内放置复选框，您可以跳过“for”，就可以了。

<!-- labelable form-relation still works -->
<label><input type="checkbox" name="personality"> Loving</label>

"for" 方法更可取，如果你想设置它的样式，f.e. using Bootstrap

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

Answer 3

为了能够使用带有复选框的标签。 例如，渲染时，单击标签，它将切换复选框的勾选状态。

编辑：除此之外，它允许将标签放在页面上的任何位置。