什么是"标签>标签?

我想知道下面两个代码片段有什么区别:

<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或出于其他原因需要?

226019 次浏览
小开

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

小开
最佳答案

<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上阅读有关<label>元素的更多信息。

将文本与输入相关联对于可访问性非常重要，因为它为输入提供了访问的名字，因此辅助技术可以将其提供给残疾用户。屏幕阅读器将在用户聚焦输入时读取标签文本。你也可以让你的语音命令软件聚焦输入，但它需要一个(可见的)名字。

Read more on Accessibility

小开

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

在问题的第一个例子中(没有for)，使用label标记没有逻辑或函数含义——它是无用的，除非你在CSS或JavaScript中对它做一些事情。

HTML规范没有强制要求将标签与控件相关联，但是Web内容可访问性指南(WCAG) 2.0要求。这在技术文档H44:使用标签元素将文本标签与表单控件关联中有描述，该文档还解释了隐式关联(通过嵌套例如input在label中)不像通过for和id属性的显式关联那样得到广泛支持，

小开

简而言之，它所做的就是引用输入的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">
小开
for属性表明这个标签代表相关的输入字段，或复选框或单选按钮或与之相关的任何其他数据输入字段。 例如< / p > 
<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>
小开

它标记任何输入是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>

小开

在html格式中使用label for=

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

示例:有< >强复选框< / >强和两个标签。

  • 你可以通过单击地 on来选中/取消选中复选框

    • 任何标签或
    • 在复选框,

    而不是在文本也不是关于输入内容…

<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的力量，你可以做很多有趣的事情…

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和label for添加了一个边栏，可以在不使用任何javascript代码的情况下进行切换。


提交答案