html label標籤的作用是什嗎？html label標籤的用法方法詳解

本篇文章主要的介紹了敢於html label標籤的介紹，還有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 事件。