深入理解HTML中label的作用和使用方法（附代碼）

在工作中經常會用到表單布局，在表單布局中會遇到label標籤，有很多新手在學習中可能會忽視了label標籤，也有些人對label標籤一知半解，那接下來就和大家聊聊label標籤是什麼意思？label標籤什麼用處？

在表單布局中會遇到label標籤的使用，其實label沒有任何樣式效果，有觸發對應表單控制項功能。比如當我們點擊選項按鈕或多選框前文字對應選項就能被選中，這個就是對文字加了<label>標籤才實現的效果。

一、label標籤怎麼用

label標籤為input元素定義圖說文字(標記)，它不會向使用者呈現任何特殊效果，和span標籤類似。但label標籤和span標籤最大的區別就是它為滑鼠使用者改進了可用性，可以關聯特定的表單控制項。
label標籤和特定表單控制項關聯之後，如果使用者在 label 元素內點擊文本，就會觸發關聯的表單控制項。就是說，當使用者選擇該label標籤時，瀏覽器就會自動將焦點轉到和label標籤相關的表單控制項上。點擊<label>標籤文字時，實現對應控制項被選擇，需要對應表單控制項id的值與label標籤內的for值相同。

二、label文法

<label for="man">男</label>
Label標籤內文字更加需要填寫
Label標籤內for屬性的值為自訂，一般與想實現點擊會觸發控制項對象的ID對應相同。

三、label實際運用

HTML程式碼片段如下：

<form action="" method="get"> 性別：<br /> <input name="sex" id="man" type="radio" value="" /> <label for="man">男</label> <input name="sex" id="woman" type="radio" value="" /> <label for="woman">女</label> </form>

註：input標籤內id的值與label標籤內for的值對應。

看圖：

總結：一般要實現點擊選項按鈕框文字或多選按鈕框文字對應選擇按鈕被選擇，使用label標籤即可，注意for與id值相同即可實現。Label標籤預設情況下是沒有任何樣式，可以使用CSS設定css寬度、css高度、css邊框等樣式。新手可以多敲代碼多敲嘗試，希望這個教程可以協助到你。