label包裹input，點選label，label響應兩次

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

但是第二種在由于是label nested input，如果将事件綁在label上，會觸發内層input的click事件。

二、label響應兩次

可以點選示例 http://codepen.io/GitKou/pen/aZBWLr

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

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

var label1 = document.querySelector("label");
var label2 = document.querySelector("#label2");
var input1 = document.querySelector("#innerIpt1");
var input2 = document.querySelector("#innerIpt2");

label1.addEventListener("click", function() {
  console.log("label1");
}, false);
input1.addEventListener("click", function(e) {
  // e.stopPropagation()
  console.log("input1");
}, false);

label2.addEventListener("click", function() {
  console.log("label2");
}, false);

input2.addEventListener("click", function(e) {
  e.stopPropagation()
  console.log("input2");
}, false);

           

點選label1的時候，console輸出:

label1 
 input1
 lable1
           

點選label2的時候，console輸出:

label2
 input2
           

很好解釋：

①點選label1，觸發click，輸出 label1；

②點選label1，用于浏覽器内部關聯關系會觸發input的click，輸出input1；

③上一個事件冒泡到label1，觸發click，輸出 label1；

三、另外的限制和建議

1.來自W3C

• 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标簽的後代。

2.

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/
2. https://www.w3.org/TR/html5/forms.html#the-label-element
3. https://www.w3.org/wiki/HTML/Elements/label
4. https://www.w3.org/TR/WCAG20-TECHS/H44.html