HTML <label>标签中的“for”属性是做什么的?
我想知道以下两个代码片段之间有什么区别:
<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或者出于某种其他原因需要?
<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中阅读有关此元素的更多信息。
for
属性将标签与控制元素相关联,如HTML 4.01规范中label
说明中所定义。 这意味着,除了别的以外,当label
元素获得焦点(例如通过点击)时,它将焦点传递到其关联的控件。 标签和控件之间的关联也可以被基于语音的用户代理使用,这可以使用户在处理控件时能够询问相关标签是什么。 (该关联可能不如视觉渲染中那么明显。)
在问题的第一个例子中(没有for
),使用label
标记没有任何逻辑或功能的含义 - 除非您在CSS或JavaScript中使用它,否则没用。
HTML规范并不强制将标签与控件相关联,但是Web Content Accessibility Guidelines(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">
链接地址: http://www.djcxy.com/p/23023.html