label 的for屬性總結

一、使用介紹

1. 定義：for屬性規定label與哪個表單元素綁定。

<label>是專門為<input>元素服務的，為其定義標記。

label 和表單控件綁定方式有兩種：

方法一：將表單控件作為label的內容，這種就是隱士綁定。

此時不需要for屬性，綁定的控件也不需要id屬性。

隱式綁定：
<label>Date of Birth: <input type="text" name="DofB" /></label>

方法二：為label標簽下的for屬性命名一個目標表單的id，這種就是顯示綁定。

顯式綁定：
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

二、為什么要給label上面加上for屬性

給 label 加了 for 屬性綁定了input控件后，可以提高鼠標用戶的用戶體檢。

如果在label 元素內點擊文本，就會觸發此控件，也就是說，當用戶渲染該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

 補充：

label 的 for屬性給 select綁定 ，點擊Male ，select只會閃下（自己測試的）：

<label for="male">Male</label>
    <select id="male">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <label for="female">Female</label>
    <select>
        <option>一</option>
        <option>二</option>
        <option>三</option>
    </select>

 

html5給<label>新增了一個form屬性來規定label所屬的一個或多個表單，多個表單用空格分隔。

參考資料：http://www.cnblogs.com/starof/p/4545525.html