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

label標(biāo)簽介紹

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

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

主要使用場景

label標(biāo)簽常用于與checkbox或radio關(guān)聯(lián)，以實(shí)現(xiàn)點(diǎn)擊文字也能選中/取消checkbox或radio。如下圖，點(diǎn)擊文字和點(diǎn)擊前面的單選框效果相同，即加大了控件的可點(diǎn)擊區(qū)域較大，因?yàn)辄c(diǎn)擊標(biāo)簽或控件都將激活控件，這對(duì)于復(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屬性，顯式與另一個(gè)表單控件關(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)簽只能包含一個(gè)表單元素，包含多個(gè)只對(duì)第一個(gè)有效。如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

效果圖如下，點(diǎn)擊”男”同樣可以選中第一個(gè)單選框

注：
該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)容還不錯(cuò)，歡迎將生活随笔推薦給好友。