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

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

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

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

for屬性規定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元素內點擊文本，就會觸發此控制項。就是說，當使用者渲染該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上。

還有關於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屬性內容，希望大家都能多多實踐，要是不知道實踐的地址，可以來topic.alibabacloud.com，視頻教程中的實戰，那裡面可以把你的代碼複製上去看看效果。有問題的可以在下方提問。