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

如果我将

for

属性放在其中，label1会有什么影响？

它指的是它所标记的表单元素（输入、选择、文本区域、选项等）的

id

（而不是

名称

！）的作用。这意味着使用

for

可以单击标签，并聚焦相关的表单元素。

它可以创建一个标签，该标签附加到DOM中的特定元素。当标签接收到鼠标按下事件时，它会聚焦它所附着的元素

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

用户名：

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

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

根据W3C

可以指定for属性来指示要与标题关联的表单控件。如果指定了该属性，则该属性的值必须是与标签元素位于同一文档中的可标签元素的ID

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

其优点之一是点击标签将获得附加的输入元素焦点

对于复选框或单选按钮，单击标签将选中该复选框/单选按钮，但它不会覆盖标签内容和复选框/单选按钮之间的空间

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

男性
女性

通过这样做，您可以实现同样的目标：

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

男性
女性

但这种做法是有争议的，我更喜欢第二个复选框/收音机，因为它还包括标签和复选框/收音机之间的空间

似乎实际上定义了标签使用的两种方式，所有主流浏览器都支持将可点击区域扩展到标签和聚焦控件

a） 控件嵌套在标签内

b） 标签链接到控件，控件具有的属性和id属性

用户名1：


用户名2：

使用

for

属性的关键优势在于，与将控件置于

中的其他有效安排相比，它将

与其关联控件分开

不明显的是

for

属性所允许的css灵活性有多大

例如：

选择

复选框

按钮可以突出显示以下标签：

输入[类型=复选框]：选中+标签{
背景颜色：黄色
}

选择我

它指的是身份证而不是姓名。真不幸。如果页面上有多个具有类似功能的表单，那么通过本地名称链接要比通过全局id链接容易得多。使用id，我们被迫为每个输入生成一个唯一的id，以避免冲突，啊！在HTML6上滚动…实际上，您也可以通过在标记之间放置用户名来实现完全相同的效果：-尽管这种做法是有争议的，因为创建的DOM将与for语法完全相同，即不嵌套（因此样式将以不太直观的方式应用）

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