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

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

and

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

我相信当您使用特殊的JavaScript库时,它会做一些事情,但除此之外,它是否验证HTML或出于其他原因需要?


当前回答

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

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

<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属性的参数标记任何输入。

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

<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>元素的信息。

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

阅读更多关于易用性的信息