什么＆＃34;为＆＃34;属性是否在HTML <label>标签中？</label>

Question

我想知道以下两个代码片段之间有什么区别：

<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元素周围：

<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中有所描述，该文档还解释了隐式关联（通过嵌套input在label内）并不像通过{{1}显式关联那样得到广泛支持}和for属性，

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 功能，您可以做很多有趣的事情...

#demo2:checked ~ .but2:before { content: 'Des'; }
#demo2:checked ~ .box2:before { content: '☒'; }
.but2:before { content: 'S'; }
.box2:before { content: '☐'; }
#demo1:checked ~ .but1:before { content: 'Des'; }
#demo1:checked ~ .box1:before { content: '☒'; }
.but1:before { content: 'S'; }
.box1:before { content: '☐'; }

<input id="demo1" type="checkbox">Demo 1</input>
<input id="demo2" type="checkbox">Demo 2</input>
<br />
<label for="demo1" class="but1">elect 2</label> - 
<label for="demo2" class="but2">elect 1</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" class="but1">elect this 2nd label </label> - 
<label class="but2" for="demo2">elect this another 2nd label </label>
<br />
<label for="demo1" class="box1"> check 1</label>
<label for="demo2" class="box2"> 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>