這篇文章給大家介紹的內(nèi)容是關(guān)于html中<label>標(biāo)簽的for屬性的詳細(xì)分析，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你有所幫助。

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

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標(biāo)簽，添加for屬性，其值與input標(biāo)簽的id屬性的值相同，以在label和input之間創(chuàng)建關(guān)聯(lián)。

同時(shí)，給出一段示例代碼，如下：

<!-- Code 1 -->
<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

代碼中，label的for屬性值與input的id屬性值相同。從這段代碼中，并不能看出關(guān)聯(lián)在何處。

關(guān)于label的for屬性的定義如下：

The for attribute specifies which form element a label is bound to.
譯文：for屬性指定label與表單中的哪個(gè)元素進(jìn)行綁定。

示例代碼：

<!-- 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>

對比兩段代碼，不難發(fā)現(xiàn)，

1. label與input標(biāo)簽的包含關(guān)系不同。Code 1 的label和input，屬于包含關(guān)系，Code 2 的label和input相對獨(dú)立。

2. label與input在頁面上的排列方式不同。通過Chrome的開發(fā)者工具不難發(fā)現(xiàn)，Code 1 的運(yùn)行結(jié)果，label標(biāo)簽將input標(biāo)簽遮蓋，Code 2 的運(yùn)行結(jié)果，label標(biāo)簽與input標(biāo)簽并列。

3. label與input一一對應(yīng)。點(diǎn)擊label的內(nèi)容，對應(yīng)的單端按鈕都會(huì)被選中。

如果，我們將兩段代碼中l(wèi)abel的for屬性刪除，則之前的第1點(diǎn)和第2點(diǎn)不變，變化的是第3點(diǎn)。Code 1 的運(yùn)營結(jié)果，點(diǎn)擊label的內(nèi)容，照舊能夠選中單選按鈕。而 Code 2 的則不同，點(diǎn)擊label的內(nèi)容，無法選中單選按鈕。

經(jīng)過簡單的代碼運(yùn)行結(jié)果對比，我們能夠驗(yàn)證文章開頭引用的那段話是正確的。為label添加for屬性的這個(gè)做法，能夠提高代碼質(zhì)量。

相關(guān)文章推薦：

html中標(biāo)簽嵌套的問題如何解決

父元素<a>標(biāo)簽的默認(rèn)行為以及click事件之間的相互影響

以上就是關(guān)于html中<label>標(biāo)簽的for屬性的詳細(xì)分析的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！