label包裹input，点击label，label响应两次

小灰灰 2022-09-21 13:26 247阅读 0赞

## 一、label和input合作的两种形式 ##

来自 [W3C][]

> The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself.

在用户交互界面的时候，label元素作为一个标题说明。**这个说明可以与特定的form control关联**，熟知的形式有两种：①通过for属性关联；②通过将form contorl放到label标签里面；

W3C WIKI上给出了两种的例子 ： [https://www.w3.org/wiki/HTML/Elements/label][https_www.w3.org_wiki_HTML_Elements_label]

但是第二种在由于是label nested input，如果将事件绑在label上，会触发内层input的click事件。

--------------------

## 二、label响应两次 ##

可以点击[示例][Link 1] [http://codepen.io/GitKou/pen/aZBWLr][Link 1]

<label for="innerIpt1">
     <input id="innerIpt1" type="checkbox"/>label1
    </label>
    
    <input id="innerIpt2" type="checkbox"/>
    <label for="innerIpt2" id="label2">label2
    </label>

点击label1的时候，console输出:

label1 
     input1
     lable1

点击label2的时候，console输出:

label2
     input2

很好解释：  
①点击label1，触发click，输出 label1；  
②点击label1，用于浏览器内部关联关系会触发input的click，输出input1；  
③上一个事件冒泡到label1，触发click，输出 label1；

## 三、另外的限制和建议 ##

1.来自[W3C][W3C 1]

>  *  The label element must not contain any nested label elements.
>  *  The label element may contain at most one descendant input element, button element, select element, or textarea element.
>  *  The for attribute of the label element must refer to a form control.
>  *  The interactive element label must not appear as a descendant of the a element.
>  *  The interactive element label must not appear as a descendant of the button element.

*  label标签内不能再包含label。
 *  label标签最多只能包含一个input子孙、button、select、或textarea。
 *  label的for属性必须只想一个form control。
 *  这个交互标签label不能作为a标签的后代。
 *  这个交互标签label不能作为button标签的后代。

> The objective of this technique is to use the label element to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control.
> 
> This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field.

无论label是否可见，在Success Criteria 1.1.1, 1.3.1 and 4.1.2中，该项技术都是起作用的。也就是说，label被css被隐藏后，仍起作用。但是在Success Criterion 3.3.2中，label元素必须可见，因为要便于所有的用户理解这个东西的功能。

--------------------

参考

1.  [https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/][https_www.paciellogroup.com_blog_2011_07_html5-accessibility-chops-form-control-labeling]
2.  [https://www.w3.org/TR/html5/forms.html\#the-label-element][W3C]
3.  [https://www.w3.org/wiki/HTML/Elements/label][https_www.w3.org_wiki_HTML_Elements_label]
4.  [https://www.w3.org/TR/WCAG20-TECHS/H44.html][https_www.w3.org_TR_WCAG20-TECHS_H44.html]

[W3C]: https://www.w3.org/TR/html5/forms.html#the-label-element
[https_www.w3.org_wiki_HTML_Elements_label]: https://www.w3.org/wiki/HTML/Elements/label
[Link 1]: http://codepen.io/GitKou/pen/aZBWLr
[W3C 1]: https://www.w3.org/TR/html-markup/label.html
[https_www.paciellogroup.com_blog_2011_07_html5-accessibility-chops-form-control-labeling]: https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/
[https_www.w3.org_TR_WCAG20-TECHS_H44.html]: https://www.w3.org/TR/WCAG20-TECHS/H44.html