HTML | DOM 标签 htmlFor 属性

简介

在HTML的label标签中，可以使用htmlFor属性将标签和控件建立联系。若使用了htmlFor属性，则不再需要将控件放在label标签内，而是将label标签和控件关联起来。

语法

<label htmlFor="controlID">Label Text</label>
<input type="text" id="controlID" />

参数

• htmlFor：必需。规定 label 与哪个表单元素绑定。

示例

<label htmlFor="firstName">First Name:</label>
<input type="text" id="firstName" />

在上面的示例中, label元素的 htmlFor 属性值为 "firstName"，这个值与 input 元素的 id 属性值相同。

注：如果我们不使用 htmlFor 属性，那么 label 元素中的 for 属性会与 JavaScript 中的 for 循环产生冲突。所以，我们建议使用htmlFor属性来代替for属性。

总结

htmlFor属性与label标签密切相关，可以方便的将标签与控件进行关联，从而实现更好的可用性和较好的用户体验。