html label標籤的for屬性有什麼作用？關於label標籤的for屬性介紹

本篇文章主要介紹了關於html label標籤的for屬性的一些作用和使用的一些實例解釋等，現在就讓我們一起來看看這篇文章吧

##首先我們看看label標籤的for屬性介紹：

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

for屬性規定label與哪個表單元素綁定

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

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

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

隱含綁定：

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

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

明確綁定：

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

為什麼要給加上for屬性？

給加上了for屬性綁定了input控制項後，可以提高滑鼠使用者的使用者體驗。

如果在label元素內點擊文本，就會觸發此控制項。是說，當使用者渲染該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項。

還有關於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中文網，視頻教程中的實戰，那裡面可以把你的程式碼複製上去看看效果。有問題的可以在下方提問。

【小編推薦】

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

html tbody標籤是區塊級元素嗎？ html tbody標籤的基礎用法
#

以上是html label標籤的for屬性有什麼作用？關於label標籤的for屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！