2013-07-06 54 views
3

我可以使用兩個具有相同for值的標籤嗎?例如:屬性的<label>是否必須是唯一的?

<label for="foo">Outer label</label> 
<div class="foo-bar"> 
    <input type="checkbox" id="foo" /> 
    <label for="foo">Inner label</label> 
</div> 
+0

作爲一個旁註,你可以通過把它放在裏面來避免它。 – Knu

回答

7

for屬性鏈接控制到input,存在,到目前爲止我所知,沒有限制元件的數量,可以鏈接到一個input,只要該inputid (或textarea,select等)是唯一的。

例如,在下面的演示label元件將觸發複選框input元件的變化(檢查/取消選中):

<label for="foo">Outer label</label> 
<div class="foo-bar"> 
    <input type="checkbox" type="checkbox" name="test" id="foo" /> 
    <label for="foo">Inner label</label> 
</div> 

JS Fiddle demo

這可以用於添加明確鏈接到或以其他方式識別出現錯誤的元素的錯誤消息(例如後驗證),而不會覆蓋/替換該元素的預先存在的label

不幸的是,到目前爲止,因爲我已經尚未發現,沒有提及或文檔的明確允許input(或類似元件),以連接到只有一個控制;然而MDN的爲<label>條目確實狀態:

同一文件作爲標籤元件在貼標籤的形式相關的元件的ID。文檔中第一個具有與for屬性值匹配的ID的元素是此標籤元素的標籤控件。

+0

'據我所知' - 請參考? – mreq

+3

沒有明確的提及說只有一個元素必須鏈接到只有一個'label'的'for'屬性(或者我會故意引用*引用來完成答案)。然而,缺乏明確的限制使我相信它是有效的。例如,對重複的「id」有明確的限制,但對於'label'的'for'屬性則不存在。 –

+1

另外應該注意的是[lablelable elements](http://www.w3.org/html/wg/drafts/html/master/forms.html#category-label),比如'input',''按鈕和選擇元素,hava a ['labels'](http://www.w3.org/html/wg/drafts/html/master/forms.html#dom-lfe-labels)IDL屬性(即通用術語中的「標籤」屬性),它是所有元素的節點列表,該元素是該元素的標籤。 – Alohci

相關問題