html label標簽的作用是什么

小編給大家分享一下html label標簽的作用是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

首先我們來看看html label標簽介紹：

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

label標簽和特定表單控件關聯之后，如果用戶在label元素內點擊文本，就會觸發關聯的表單控件。就是說，當用戶選擇該label標簽時，瀏覽器就會自動將焦點轉到和label標簽相關的表單控件上。

html label標簽的主要使用場景：

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

現在說說html label標簽有什么用：

<label> 標簽為 input 元素定義標注（標記）。label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。實例帶有兩個輸入字段和相關標記的簡單 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>

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

最后，我們來看看關于html label標簽的注釋：

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

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

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

看完了這篇文章，相信你對html label標簽的作用是什么有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！