HTML <label> 标签中的“for”属性有什么作用？

Question

不知道下面两个代码sn-ps有什么区别：

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

和

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

我确信当你使用一个特殊的 JavaScript 库时它会做一些事情，但除此之外，它是验证 HTML 还是出于其他原因需要？

Answer 1

<label> 标签允许您点击标签，它会被视为点击关联的输入元素。有两种方法可以创建此关联：

一种方法是将标签元素包裹在输入元素周围：

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

另一种方法是使用for 属性，给它相关输入的ID：

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

这对于与复选框和按钮一起使用特别有用，因为这意味着您可以通过单击相关文本来选中框，而不必点击框本身。

在MDN 中阅读有关此元素的更多信息。

Answer 2

for 属性将标签与控制元素相关联，如 HTML 4.01 规范中label 的描述中所定义。这意味着，除其他外，当label 元素获得焦点（例如，通过单击）时，它将焦点传递给其关联的控件。标签和控件之间的关联也可以由基于语音的用户代理使用，这可以让用户在处理控件时询问关联的标签是什么。 （这种关联可能不像在视觉渲染中那么明显。）

在问题的第一个示例中（没有for），label 标记的使用没有逻辑或功能上的含义——它没有用，除非你在 CSS 或 JavaScript 中使用它。

HTML 规范不强制将标签与控件关联，但 Web 内容可访问性指南 (WCAG) 2.0 可以。这在技术文档H44: Using label elements to associate text labels with form controls 中进行了描述，该文档还解释了隐式关联（通过在label 中嵌套例如input）不如通过for 和id 属性的显式关联得到广泛支持，

Answer 3

简而言之，它所做的就是引用输入的id，仅此而已：

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">

Answer 4

<label> 标签的for 属性应该等于相关元素的id 属性才能将它们绑定在一起。

Answer 5

for 属性显示此标签代表相关输入字段，或复选框或单选按钮或与之关联的任何其他数据输入字段。 例如

<li>
    <label>{translate:blindcopy}</label>
    <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />

</li>

Answer 6

在html表单中使用label for=

这可以允许在视觉上分离标签和对象，同时保持它们之间的联系。

示例：有一个复选框和两个标签。

• 您可以通过单击无差别来选中/取消选中该框

  • 任何标签或
  • 在复选框上，

  但不在文本上也不在输入内容上...

<label for="demo1"> There is a label </label>
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis egestas, velit odio imperdiet eros, sit amet sagittis nunc mi ac neque. Sed non ipsum. Nullam venenatis gravida orci.
<br />
<label for="demo1"> There is a 2nd label </label>
<input id="demo1" type="checkbox">Demo 1</input>

一些有用的技巧

相同的示例，但具有 两个 复选框和一些不同的 CSS 效果（例如写入文本：Select this 或 Deselect this 反映复选框状态。

通过使用样式表CSS power，您可以做很多有趣的事情...

body { background: #DDD; } 
.button:before { content: 'S'; }
.box:before { content: '☐'; }
label.button   { background: #BBB;
    border-top: solid 2px white;border-left: solid 2px white;
    border-right: solid 2px black;border-bottom: solid black 2px; }

#demo2:checked ~ .but2:before { content: 'Des'; }
#demo2:checked ~ .but2  { background: #CCC;
    border-top: solid 2px black;border-left: solid 2px black;
    border-right: solid 2px white;border-bottom: solid white 2px; }
#demo2:checked ~ .box2:before { content: '☒'; }

#demo1:checked ~ .but1  { background: #CCC;
    border-top: solid 2px black;border-left: solid 2px black;
    border-right: solid 2px white;border-bottom: solid white 2px; }

#demo1:checked ~ .but1:before { content: 'Des'; }
#demo1:checked ~ .box1:before { content: '☒'; }

<input id="demo1" type="checkbox">Demo 1</input>
<input id="demo2" type="checkbox">Demo 2</input>
<br />
<label for="demo1" class="button but1">elect 1</label> - 
<label for="demo2" class="button but2">elect 2</label>
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis ...
<br />
<label for="demo1" class="but1 button">elect this 2nd label for box 1</label> - 
<label class="but2 button" for="demo2">elect this other 2nd label for box 2</label>
<br />
<label for="demo1" class="box box1"> check 1</label>
<label for="demo2" class="box2 box"> check 2</label>

Answer 7

它将任何输入标记为for 属性的参数。

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>