HTML<label> 標籤的 for 屬性

標籤：blog   http   io   ar   for   java   strong   on   div   

定義和用法

for 屬性規定 label 與哪個表單元素繫結。

隱式和顯式的聯絡

標記通常以下面兩種方式中的一種來和表單控制項相聯絡：將表單控制項作為標記標籤的內容，這樣的就是隱式形式，或者為 <label> 標籤下的 for 屬性命名一個目標表單 id，這樣就是顯式形式。

例如，在 XHTML 中：

顯式的聯絡：

[html] view plaincopy

1. <label for="SSN">Social Security Number:</label>
2. <input type="text" name="SocSecNum" id="SSn" />

隱式的聯絡：

[html] view plaincopy

1. <label>Date of Birth: <input type="text" name="DofB" /></label>

第一個標記是以顯式形式將文本 "Social Security Number:" 和表單的社會安全號碼的文本輸入控制項("SocSecNum") 聯絡起來，它的 for 屬性的值和控制項的 id 一樣，都是 SSN。第二個標記 ("Date of Birth:") 不需要 for 屬性，它的相關控制項也不需要id 屬性，它們是通過在 <label> 標籤中放入 <input> 標籤來隱式地串連起來的。

執行個體

帶有兩個輸入欄位和相關標記的簡單 HTML 表單：

[html] view plaincopy

1. <form>
2. <label for="male">Male</label>
3. <input type="radio" name="sex" id="male" />
4. <br />
5. <label for="female">Female</label>
6. <input type="radio" name="sex" id="female" />
7. </form>

 

另外：在javascript中實現建立聯絡

 //*-------為每個radio標籤添加id，為每個label標籤添加for屬性-------   window.onload = function(){     var theWrapDiv = document.getElementById(‘carList‘);         var theLabel = theWrapDiv.getElementsByTagName("label");         var theInput = theWrapDiv.getElementsByTagName("input");for(i = 0; i < theInput.length; i ++){    theInput[i].id = "state" + i;         }for(j = 0; j < theLabel.length; j ++){            theLabel[j].setAttribute("for","state" + j);         }   }

HTML<label> 標籤的 for 屬性