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

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

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

这对可访问性也有好处,因为屏幕阅读器将在读取输入字段之前读取标签的内部HTML,而不管它们在DOM中的物理顺序如何。

它指的是 id (不是 name !) 正在标记的表单元素(输入、选择、文本区域、选项等)。这意味着 for 允许单击标签,并聚焦相关的表单元素。

可以指定for属性来指示标题要与之关联的窗体控件。如果指定了该属性,则该属性的值必须是与label元素位于同一文档中的labelable元素的ID。

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>

似乎真的 HTML5 specs <标签> 标签使用和所有主要浏览器都支持将可单击区域扩展到标签和聚焦控件。

(一) 控件嵌套在标签中

对于 & 身份证件

<!-- 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)允许您在布局中分离标签和控件,例如,在两个不同的表单元格中。

使用 for <label> 从它的相关控制,相比之下,其他有效的安排有控制在 <标签>

目前尚不明显的是css的灵活性有多大 对于

例如:

1. checkbox 按钮可以突出显示以下标签:

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>

这允许具有紧凑的显示或窗体,其中用户可以有选择地显示相关的字段或控件集。

+ (下一个兄弟姐妹)和 ~ (跟随同级)css选择器。

<标签> 不能使用css设置其父级样式,也不能设置其父级的任何同级样式。