HTML中for屬性的用途是什麼？

Question

我瞭解for屬性指定哪個form元素與label綁定。

你有沒有一個例子，這實際上是有用的？

Answer 1

<label for="name">Name</label> 

<input type="text" id="name" /> 

http://jsfiddle.net/jRB2s/3/

點擊標籤會給焦點到元件具有相同的ID作爲對值。

對於單選按鈕或複選框，它將切換其狀態，就像您點擊它們一樣。

這對手持設備尤其有用，特別是在手持設備上，點擊所需的表單控件並不總是很簡單。

Answer 2

這對複選框標籤最爲有用，它將使整個標籤可點擊，因此您不必將複選框自己定位到切換其狀態。單選按鈕也一樣。

Answer 3

<label for="email">E-mail:</label> 
<input type="text" id="email" name="email"/> 

現在，如果您點擊「電子郵件」，相應的input元素將會被關注。

Answer 4

這是出於語義的目的。這對屏幕閱讀器以及潛在的搜索引擎都很有用。瀏覽器還會將控件連接到它們的標籤（例如，點擊標籤時將激活複選框），並且您可以將快捷鍵應用於標籤，這些標籤將在按下時聚焦控件。

有兩種格式的標籤：

<label>Label<input ... /></label> 

它不需要爲屬性。並且

<label for="control">Label</label> 
<input id="control" name="control" ... /> 

當標籤和輸入被分開（例如表格）時可能需要。