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

Question

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

如果我在其中加入for属性，label1会产生什么影响?

- Diskdrive

Answer 1

它允许你创建一个标签，附加到 DOM 中的特定元素。当该标签接收到鼠标按下事件时，它会将焦点设置到它所附加的元素上。

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

当用户单击“用户名：”文本时，它将聚焦在文本框上。这对于无障碍性也很有好处，因为屏幕阅读器会先读取标签的内部HTML，然后再读取输入字段，而不管它们在DOM中出现的物理顺序如何。

- Michael Shimmins

---

实际上，您也可以通过将<input>放置在<label></label>标记之间来实现完全相同的效果，即<label>用户名：<input type="text" id="username" name="username" /></label> - 尽管这种做法是有争议的，因为创建的DOM将与for语法完全相同，即不嵌套（因此样式将以不太直观的方式应用）。 - user719662

Answer 2

它指的是表单元素（input、select、textarea、option等）的id属性（而不是name属性！）。这意味着使用for属性可以让用户点击标签，自动聚焦到相关的表单元素。

- Delan Azabani

---

它指的是ID而不是名称。 - Michael Shimmins

多么不幸。如果页面上有多个具有类似功能的表单，则通过本地名称进行链接比通过全局 ID 进行链接更容易。使用 ID，我们被迫为每个输入生成唯一的 ID 以避免冲突，这真是烦人！HTML6 快点出来吧... - joeytwiddle

Answer 3

使用for属性的主要优点是，与将控件放在标签内的其他有效排列方式相比，它将标签与其关联的控件分开。

不太明显的是，for属性允许更多的CSS灵活性。

例如：

1. 选择复选框按钮可以突出显示紧接着的标签：

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

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

2. 检查复选框，可以用按钮替换其标签，例如删除按钮：

#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>

这可以减少意外删除，而无需弹出确认窗口。

3. 选择单选按钮会显示相关的“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来设置其父元素或任何父元素的兄弟元素的样式。

- Patanjali

Answer 4

看起来实际上HTML5规范定义了两种使用<label>标签的方式，所有主要浏览器都支持将可点击区域扩展到标签并聚焦控件。

a）控件嵌套在标签内

b）标签通过for和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）允许您在布局中分离标签和控件，例如，在 2 个不同的表格单元中。

- JavierFuentes

Answer 5

根据W3C的规定，

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

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

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

其中之一的好处是单击标签将使输入元素获得焦点，

在复选框或单选按钮的情况下，单击标签将选中该复选框/单选按钮，但它不包括标签内容和复选框/单选按钮之间的空格。

<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>

但这种做法是有争议的，我更喜欢第二种方式用于复选框/单选按钮，因为它还包括标签和复选框/单选按钮之间的空间。

- pk_code