介紹的內容是html5中<label>標籤的for屬性使用方式方法詳細分析。 本站收錄這篇文章html5中<label>標籤的for屬性使用方式方法詳細分析，詳細解說文章中相關html5 label 標籤for屬性技術與知識，歡迎能給大家一些在這方面的支持和幫助！下面是詳細內容：
介紹的內容是html5中<label>標籤的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.
大概的意思是：最好的做法，是給label標籤，添加for屬性，其值與input標籤的id屬性的值相同，以在label和input之間創建關聯。
同時，給出一段示例代碼，如下：
<!-- Code 1 --><label for=indoor> <input id=indoor type=radio name=indoor-outdoor>Indoor </label>
代碼中，label的for屬性值與input的id屬性值相同。從這段代碼中，並不能看出關聯在何處。
關於label的for屬性的定義如下：
The for attribute specifies which form element a label is bound to.
譯文：for屬性指定label與表單中的哪個元素進行綁定。
示例代碼：
<!-- Code 2 --><form action=/action_page.php> <input type=radio name=gender id=male value=male> <label for=male>Male</label> <br> <input type=radio name=gender id=female value=female> <label for=female>Female</label> <br> <input type=radio name=gender id=other value=other> <label for=other>Other</label> <br> <input type=submit value=Submit></form>
對比兩段代碼，不難發現，
label與input標籤的包含關係不同。 Code 1 的label和input，屬於包含關係，Code 2 的label和input相對獨立。
label與input在頁面上的排列方式不同。通過Chrome的開發者工具不難發現，Code 1 的運行結果，label標籤將input標籤遮蓋，Code 2 的運行結果，label標籤與input標籤並列。
label與input一一對應。點擊label的內容，對應的單端按鈕都會被選中。
如果，我們將兩段代碼中label的for屬性刪除，則之前的第1點和第2點不變，變化的是第3點。 Code 1 的運營結果，點擊label的內容，照舊能夠選中單選按鈕。而Code 2 的則不同，點擊label的內容，無法選中單選按鈕。
經過簡單的代碼運行結果對比，我們能夠驗證文章開頭引用的那段話是正確的。為label添加for屬性的這個做法，能夠提高代碼質量。
關於html5中<label>標籤的for屬性使用方式方法詳細分析的內容寫到這裡就結束啦，您可以收藏本頁網址http://www.VeVb.com/web/a/2018090496006.shtml方便下次再訪問哦。