關於html中標籤的for屬性的詳細分析

這篇文章給大家介紹的內容是關於html中標籤的for屬性的詳細分析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

在freecodecamp上HTML教程的Create a Set of Radio Buttons這一節中，看到這樣一段話，

It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element.##ween the label and the child input element.##ween the label and the child input element.## ：最好的做法，是給

label

標籤，加上for屬性，其值與input標籤的id屬性的值相同，以在label和input之間建立關聯。 同時，給出一段範例程式碼，如下：

<!-- Code 1 -->
<label>
  <input>Indoor
</label>

#程式碼中，label的for屬性值與input的id屬性值相同。從這段程式碼中，並不能看出關聯在何處。

關於label的for屬性的定義如下：

The for attribute specifies which form element a label is bound to.

 譯文：for屬性指定label與表單中的哪個元素進行綁定。

範例程式碼：

<!-- Code 2 -->

     Male   
     Female   
     Other   
  

比較兩段程式碼，不難發現，

##label與input標籤的包含關係不同。 Code 1 的label和input，屬於包含關係，Code 2 的label和input相對獨立。

1. label與input在頁面上的排列方式不同。透過Chrome的開發者工具不難發現，Code 1 的運行結果，label標籤將input標籤遮蓋，Code 2 的運行結果，label標籤與input標籤並列。

2. label與input一一對應。點選label的內容，對應的單端按鈕都會被選取。

3. 如果，我們將兩段程式碼中label的for屬性刪除，則先前的第1點和第2點不變，變化的是第3點。 Code 1 的營運結果，點選label的內容，照舊能夠選取單選按鈕。而 Code 2 的則不同，點選label的內容，無法選取單選按鈕。

經過簡單的程式碼運行結果對比，我們能夠驗證文章開頭引用的那段話是正確的。為label加入for屬性的這個做法，能夠提高程式碼品質。

相關文章推薦：

html中標籤嵌套的問題如何解決

父元素標籤的預設行為以及click事件之間的相互影響

以上是關於html中標籤的for屬性的詳細分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！