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>

在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效果(如在文本中写入:选择此或取消选择此反映复选框状态。)

通过使用样式表CSS的力量，你可以做很多有趣的事情…

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 /><br /> <label for="demo1" class="box box1"> check 1</label> <label for="demo2" class="box2 box"> check 2</label>

用法示例:仅使用CSS切换边栏(第二段)。

在这个答案中，我只使用CSS和标签for来添加侧边栏，可以在不使用任何javascript代码的情况下进行切换。

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

<input id='myInput' type='radio'> <label for='myInput'>我的第一个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>

简而言之，它所做的就是引用输入的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">

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

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>