轉(zhuǎn)載 from ：https://blog.csdn.net/gnail_oug/article/details/72852150

label標(biāo)簽介紹

label標(biāo)簽為input元素定義標(biāo)注(標(biāo)記)，它不會向用戶呈現(xiàn)任何特殊效果，和span標(biāo)簽類似。但label標(biāo)簽和span標(biāo)簽最大的區(qū)別就是它為鼠標(biāo)用戶改進了可用性，可以關(guān)聯(lián)特定的表單控件。

label標(biāo)簽和特定表單控件關(guān)聯(lián)之后，如果用戶在 label 元素內(nèi)點擊文本，就會觸發(fā)關(guān)聯(lián)的表單控件。就是說，當(dāng)用戶選擇該label標(biāo)簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和label標(biāo)簽相關(guān)的表單控件上。

主要使用場景

label標(biāo)簽常用于與checkbox或radio關(guān)聯(lián)，以實現(xiàn)點擊文字也能選中/取消checkbox或radio。如下圖，點擊文字和點擊前面的單選框效果相同，即加大了控件的可點擊區(qū)域較大，因為點擊標(biāo)簽或控件都將激活控件，這對于復(fù)選框和單選框特別有用。
這里寫圖片描述

label標(biāo)簽和特定表單元素關(guān)聯(lián)方式

label標(biāo)簽的關(guān)聯(lián)方式主要有兩種，顯示關(guān)聯(lián)和隱式關(guān)聯(lián)：
方式1：顯式關(guān)聯(lián)

顯式關(guān)聯(lián)是通過label標(biāo)簽的for屬性，顯式與另一個表單控件關(guān)聯(lián)。需要注意的是，for屬性的值必須是與label標(biāo)簽在同一文檔中的可標(biāo)記表單元素的id，注意是id而不是name。如：

愛好：

<input type='checkbox' name='basket' id='basketball'> <label for="basketball">籃球</label> <input type='checkbox' name='football' id='football'> <label for="football">足球</label>

效果圖：

隱式關(guān)聯(lián)

隱式關(guān)聯(lián)是直接將表單控件放到label標(biāo)簽內(nèi)，這種情況下，label標(biāo)簽只能包含一個表單元素，包含多個只對第一個有效。如下：

<label>點擊我可以使文本框獲得焦點<input type='text' name='theinput' id='theinput'> </label>

效果圖如下，點擊文字便能是文本框獲得焦點：?

顯示關(guān)聯(lián)和隱式關(guān)聯(lián)的優(yōu)缺點：

顯式關(guān)聯(lián)優(yōu)點：

??? 可以減少標(biāo)簽嵌套層數(shù)
??? label標(biāo)簽和表單可以在不同的位置

顯示關(guān)聯(lián)缺點：

??? 控件需要定義id屬性
??? label標(biāo)簽和表單控件不利于作為一個整體來控制

隱式關(guān)聯(lián)優(yōu)點：

??? 控件無需定義id
??? 標(biāo)簽和控件方便作為一個整體控制

隱式關(guān)聯(lián)缺點：

??? 增加了標(biāo)簽嵌套層數(shù)
??? 不能將標(biāo)簽和關(guān)聯(lián)控件放到不同的位置

以上是個人對兩種方式的看法，使用時可按需要選擇顯示或隱式。
label標(biāo)簽的瀏覽器支持及可關(guān)聯(lián)的表單元素

所有主流瀏覽器都支持label標(biāo)簽。Safari 2 或更早的版本不支持label標(biāo)簽。

能使用顯示關(guān)聯(lián)的表單元素有：

??? input type="text" 文本框，點擊標(biāo)簽時關(guān)聯(lián)的文本框獲得焦點。
??? input type="checkbox" 復(fù)選框，點擊標(biāo)簽時選中或取消選中復(fù)選框。
??? input type="radio" 單選框，點擊標(biāo)簽時選中單選框。
??? input type="file" 文件上傳，點擊標(biāo)簽時打開文件選擇對話框。
??? input type="password" 密碼框，點擊標(biāo)簽時密碼框獲得焦點。
??? textarea 文本域，點擊標(biāo)簽時文本域獲得焦點。
??? select 下拉框，點擊標(biāo)簽時，下拉框獲得焦點，不過并不展開下拉框選項。

label標(biāo)簽的form屬性

form 屬性指定label標(biāo)簽元素所屬的表單。如下，雖然label標(biāo)簽在myform表單外，但仍屬于myform表單。如下：

<form action="http://songguoliang.com/test.html" id="myform"><input type="radio" name="sex" id="male" value="male"><br><label for="female">女</label><input type="submit" value="提交"> </form><label for="male" form="myform">男</label>

效果圖如下，點擊”男”同樣可以選中第一個單選框

注：
該form屬性已于2016年4月28日從HTML規(guī)范中刪除。但是，腳本仍然可以訪問只讀HTMLLabelElement.form屬性; 它返回標(biāo)簽的關(guān)聯(lián)控件是成員的形式，或者null如果標(biāo)簽未與控件相關(guān)聯(lián)或控件不是表單的一部分。
---------------------

總結(jié)

以上是生活随笔為你收集整理的HTML Label标签使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。