2010-06-29 75 views
90

考慮以下兩行代碼(從複製w3schools.com>「HTML標籤<>的屬性」):關於HTML標籤的「對於」物權

<label for="male">Male </label> 
    <input type="radio" name="sex" id="male" /> 

我無法發現確切目的上述標籤的「for」屬性。正如你所看到的,它現在被設置爲「男性」(匹配輸入控件的id)。

到目前爲止,我讀到的所有內容都是上面的代碼會將輸入控件的「標籤」與「綁定」到標籤上。 所以我的問題是,這到底意味着什麼?

將標籤與輸入控件關聯的結果究竟是什麼?
由於此「關聯」,標籤和/或輸入是否具有新行爲?

+4

你們工作很快,謝謝你的許多答案,我希望我可以給你所有的勾號:) – user328414 2010-06-29 17:03:36

+0

@user這個問題被問到6月29 '10在16:53在哪裏作爲你的實際副本被問8月25' 13點18分。 – user328414 2015-04-06 16:44:53

回答

135

A label與通過for的控件關聯將是可點擊的。點擊它選擇控件。對收音機/複選框尤其有用。它還對視障人士的屏幕閱讀器具有可訪問性。

+0

+1你點擊文本和綁定元素將被選中 – galambalazs 2010-06-29 16:56:19

+59

+1好作品,如果你使用也很有價值,'for'必須映射到輸入元素的'ID' ,而不是它的名字。 – 2012-07-06 21:19:51

+6

值得注意的是,您可以通過在'label'標籤內包含'input'標籤來獲得相同的行爲,如下所示:http://jsfiddle.net/makeblake/9y86g/ – 2013-12-17 18:28:02

9

當您單擊標籤(男)時,無線電會,如果你不使用標籤進行檢查的東西是不可能的。開發小型設備(如手機)時,標籤也很有用。

  • 無障礙方面的原因
  • 更小的設備,如手機等
  • 中的單選按鈕有用和複選框尤其是
+0

呃,它是'label',而不是'lable'。 – ceejayoz 2010-06-29 16:55:51

+0

@ceejayoz:是一個錯字,修正,謝謝 – Sarfraz 2010-06-29 16:57:01

+0

鏈接的內容是否改變?我沒有找到信息。 – 2014-01-03 11:51:54

3

我相信鏈接:

所以,它是非常有用的一個表單元素的標籤允許你爲訪問鍵分配一個訪問鍵,這會將焦點帶到與之關聯的表單元素。

正如其他人所說,它還允許您點擊label並將焦點放在表單元素上。

for屬性讓你放置label和元素在html的語義上不同的區域,並保持關聯。 (就像兩張桌子,或兩個不同的div)。如果你把它們放在一起,就像在你的例子中一樣,將表單元素放在標籤中並放棄for屬性

3

是的,我相信它在表單控件或檢查機制在網頁上填寫表格,尤其是使用單選按鈕或複選框的表格。通過點擊標籤,它將用戶直接指向表單上需要鍵入正確信息的區域。例如,一個「文本」。或者,在用戶必須從某些選項中選擇的情況下,如真或假,或男性或女性。