歡迎來到Altaba的部落格 2017年1月23日

關於label，標籤，大家印象應該是表單中和input在一起繫結使用的，方便點選，這也是label的核心功能，首先，引用W3C的具體描敘，讓不瞭解的童鞋先初步認識一下

<label> 標籤為 input 元素定義標註（標記）。

label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制元件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。

<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

咱在這篇文章是介紹label的巧妙使用，重點來了！

<input type="text" name="" id="text" /><label for="text">一個label，配文字框</label><br/>  

<input id="User3" type="radio" name="gender" value="3">    <label for="User3">label配radio</label>  

這樣點選label裡面的文字，text框獲取到焦點，radio會被點選，非常方便

還可以這樣巢狀包圍實現

<label><input type="checkbox" name="aksd" id="aksd" />包圍起來</label>
 

建議，不包圍去使用，用其for屬性指定到具體的表單元素，這樣即使兩個分割兩地很遠，也能繫結，況且：label包input的方法，在IE6下無效！所以建議不巢狀

巧妙使用：label不僅僅使用與表單，當你需要實現：點選一個圖片或者文字A會觸發另外一個B的點選事件，只要將label A的for指向B的ID，非常方便，會省去很多JS程式碼