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標籤有什麼用：

2e1cf0710519d5598b1f0f14c36ba674 標籤為 input 元素定義標註（標記）。 label 元素不會呈現任何特殊效果給使用者。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控制項。是說，當使用者選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項。 2e1cf0710519d5598b1f0f14c36ba674 標籤的 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 code標籤怎麼換行？這篇文章讓你徹底了解code短語的用處

html空格程式碼怎麼寫？ html空格程式碼的表現方式總結

#

以上是html label標籤的作用是什麼？ html label標籤的用法方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！