html label標簽的for屬性有什么作用？對于label標簽的for屬性說明

首先我們看看關于label標簽的for屬性介紹：

<label>專為input元素服務，為其定義標記。

for屬性規(guī)定label與哪個表單元素綁定

label和表單控件綁定方式又兩種：

1.將表單控件作為label的內容，這樣就是隱士綁定。

此時不需要for屬性，綁定的控件也不需要id屬性。

隱式綁定：

<label>Date of Birth: <input type="text" name="DofB" /></label>

2.為<label>標簽下的for屬性命名一個目標表單的id，這就是顯示綁定。

顯式綁定：

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

為什么要給<label>加上for屬性？

給<label>加了for屬性綁定了input控件后，可以提高鼠標用戶的用戶體驗。

如果在label元素內點擊文本，就會觸發(fā)此控件。就是說，當用戶渲染該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

還有關于html label標簽的for屬性作用：

label標簽的for屬性的效果就是，鼠標點擊“女”實現radio選中的效果，主要

歸功于for=nv 而且必須要求input文本框的id也等于nv，男這個radio作對比，沒有這個效果

<div>
<label for="nan1">男</label>
<input type="checkbox" id="nan" />
<label for="nv">女</label>
<input type="checkbox" id="nv" />
</div>

代碼在瀏覽器中顯示的效果如圖：

圖中是個可以多選的選框。大家都可以用著實驗實驗。

來看個html label標簽的for屬性實例

擁有兩個帶有標簽的單選按鈕的表單：

<form action="demo_form.asp">
<label for="male">php中文網</label>
<input type="radio" name="sex" id="male" value="male"/>
<label for="female">html</label>
<input type="radio" name="sex" id="female" value="female"/>
<input type="submit" value="Submit"/>
</form>

這個的效果如圖：

這個圖是個單選按鈕，不能多選。

以上就是這篇文章的全部內容了，關于label標簽的for屬性內容，希望大家都能多多實踐，要是不知道實踐的地址，可以來PHP中文網，視頻教程中的實戰(zhàn)，那里面可以把你的代碼復制上去看看效果。有問題的可以在下方提問。

【小編推薦】

html code標簽怎么換行？這篇文章讓你徹底了解code短語的用處

html tbody標簽是塊級元素嗎？html tbody標簽的基礎用法

以上就是html label標簽的for屬性有什么作用？關于label標簽的for屬性介紹的詳細內容，更多請關注php中文網其它相關文章！