HTML标记中的For属性是什么？

Question

  <label id="label1" for="txtTextBox">

如果我将for属性放在那里，label1的影响是什么？

Answer 1

它允许您创建附加到DOM中特定元素的标签。当标签收到鼠标按下事件时，它会聚焦它附加的元素。

<label for="username">Username:</label>
<input type="text" id="username" name="username" />

当用户点击“用户名：”文本时，它将聚焦文本框。

这对于可访问性也很有用，因为屏幕阅读器会在读取输入字段之前读取标签的内部HTML，而不管它们在DOM中出现的物理顺序。

Answer 2

它指的是它标记的表单元素（input，select，textarea，option等）的id（不是name！）。这意味着使用for允许用户点击标签，并关注相关的表单元素。

Answer 3

根据W3C，

可以指定for属性以指示与标题相关联的表单控件。如果指定了该属性，则该属性的值必须是与标签元素在同一Document中的可标记元素的ID。

如果指定了属性并且Document中有一个元素，其ID等于for属性的值，并且第一个这样的元素是一个可标记的元素，那么该元素就是标签元素的标记控件。

https://dev.w3.org/html5/spec-preview/the-label-element.html#attr-label-for

其中一个好处是点击标签将获得附加的输入元素焦点，

如果是Checkbox或单选按钮，单击标签将检查复选框/收音机，但它不包括标签内容和复选框/收音机之间的空格

<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>

<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>

你可以通过以下方式实现同​​样的目标：

    <label><input type="radio" name="gender" id="male" value="male"> Male </label>
    <label><input type="radio" name="gender" id="female" value="female"> Female</label>

但这种做法是有争议的，我更喜欢Checkbox / Radio，因为它还涵盖了标签和复选框/收音机之间的空间。

Answer 4

实际上似乎HTML5 specs定义了＆lt;的两种方式标签＆gt; 标签用法和所有主流浏览器都支持将可点击区域扩展到标签并聚焦控件。

a） Control嵌套在Label

中

b）标签与 ＆amp; id 属性

<!-- Method a: nested -->
<p>
  <label>
      Username1: 
      <input type="text" id="name_user" name="nameuser" />
  </label>
</p>

<!-- Method b: linked -->
<p>
  <label for="user_name">Username2: </label>
  <input type="text" id="user_name" name="username" />
</p>

我在两种方法之间找到的唯一区别是将标签链接到控件（方法b）允许您在布局中分隔Label和Control，例如，在2个不同的表格单元格中。

Answer 5

使用for属性的主要优点是，与将控件放在<label>中的其他有效布置相比，它将<label>与它的关联控件分隔开。 / p>

目前尚不明显的是for属性所允许的CSS灵活性。

例如：

1. 选择一个checkbox按钮可以突出显示紧随其后的标签：

input[type=checkbox]:checked+label {
  background-color: yellow
}

<input id="c1" type="checkbox" value="c1" />
<label for="c1">Select me</label>

1. 选中一个复选框，可以将其标签替换为一个按钮，例如用于删除：

#bn {
  display: none
}

#cb:checked+#lb {
  display: none
}

#cb:checked~#bn {
  display: inline
}

<p>
  <input id="cb" type="checkbox" value="" />
  <label id="lb" for="cb">Delete</label>
  <button id="bn" type="submit">Confirm</button>
</p>

这可以减轻意外删除的麻烦，而无需弹出窗口进行确认。

1. 选择单选按钮将显示一个关联的`div：

div {
  display: none;
  border: thin grey solid;
  padding:1em
}

#r1:checked~#c1 {
  display: block
}

#r2:checked~#c2 {
  display: block
}

<input id="r1" name="rb" type="radio" value="A" />
<label for="r1">Show div 1</label>

<input id="r2" name="rb" type="radio" value="B" />
<label for="r2">Show div 2</label>
<br />
<br />
<div id="c1">
  This is the content for div 1.
</div>
<div id="c2">
  This is the content for div 2.
</div>

这允许显示紧凑或形式紧凑，用户可以在其中选择性地显示相关的字段或控件集。

之所以起作用，是因为html树中的所有元素都处于同一级别，从而允许使用+（下一个兄弟姐妹）和~（在兄弟姐妹之后）css选择器。

<label>中的控件不能使用CSS为其父级或父级的任何同级样式。