html label標(biāo)簽的作用是什么？html label標(biāo)簽的用法方法詳細說明

首先我們來看看html 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)的表單控件上。

html label標(biāo)簽的主要使用場景：

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

現(xiàn)在說說html label標(biāo)簽有什么用：

<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。label 元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進了可用性。如果您在 label 元素內(nèi)點擊文本，就會觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。實例帶有兩個輸入字段和相關(guān)標(biāo)記的簡單 HTML 表單：

<form> 
<label for="male">兩個人</label> 
<input type="radio" name="sex" id="male" />
<label for="female">一個人</label> 
<input type="radio" name="sex" id="female" />
</form>

這是一個單選框，就不用顯示效果了。

最后，我們來看看關(guān)于html label標(biāo)簽的注釋：

要將 LABEL 綁定到其它的控件，請將 LABEL 元素的 FOR 屬性設(shè)置為與該控件的 ID 相同。將 LABEL 綁定到控件的 NAME 屬性毫無用處。但是，要提交表單，你必須為 LABEL 元素所綁定到的控件指定 NAME。

有兩種方法給所指定的快捷鍵添加下劃線。LABEL 元素的 rich text 支持可以在 ACCESSKEY 屬性所指定的快捷鍵字符兩側(cè)加上 U 元素。如果你更愿意使用樣式表(CSS)來應(yīng)用樣式，可以將該字符包含在 SPAN 中，并設(shè)置樣式為“text-decoration: underline”。

如果用戶單擊 LABEL，則會先觸發(fā) LABEL 上的 onclick 事件，然后觸發(fā)由 htmlFor 屬性所指定的控件上的 onclick 事件。按下 LABEL 設(shè)定的快捷鍵將設(shè)置焦點但并不觸發(fā) onclick 事件。

【小編推薦】

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

html空格代碼怎么寫？html空格代碼的表現(xiàn)方式總結(jié)

以上就是html label標(biāo)簽的作用是什么？html label標(biāo)簽的用法方法詳解的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！