深入理解HTML中label的作用與使用方法（附程式碼）

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

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

一、label標籤怎麼用

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

二、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邊框等樣式。新手可以多敲程式碼多敲嘗試，希望這個教學可以幫助你。

以上是深入理解HTML中label的作用與使用方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！