<label> 是 HTML 表單裡的欄位標題元素，通常是作為 <button>、<checkbox> 或 <radio> 元素的標題文字，也可加上輔助點擊的功能，這篇文章將會介紹 <label> 欄位標題元素的用法。

原文參考：欄位標題 label

認識 <label>

<label> 是 HTML 表單裡的欄位標題元素，通常是作為其他表單元素的標題，也會加上輔助點擊的功能。

• <label> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，也因為是容器元素，裡頭可以放入其他的子元素。
• <label> 的顯示類型為「inline 行內元素」，預設不會強制換行。
• <label> 最多只能具有「一個」子元素 ( 表單元素 )。
• <label> 不可以是 <a>、<button> 或 <label> 的子元素。

例如下方的 HTML 開啟後，在網頁中會放入兩組 <label> 和 <input>。

<form action="test.aspx" method="get" target="_blank">
  <label for="user">帳號</label>
  <input name="user" id="user">
  <br>
  <label for="pwd">密碼</label>
  <input name="pwd" id="pwd">
</form>

<label> 支援屬性

<label> 除了支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，也會使用下方的專門屬性：

下方的 HTML 會放入兩組 <label> 和 <input>，<label> 會使用 for 屬性，指向具有相同 id 的 <input>，如此一來，就算是點擊欄位標題，對應的輸入欄位就會自動成為焦點。

<form action="test.aspx" method="get" target="_blank">
  <label for="user">帳號</label>
  <input name="user" id="user">
  <br>
  <label for="pwd">密碼</label>
  <input name="pwd" id="pwd">
</form>

如果將 <input> 變成 <label> 的子元素，就可以在不需要設定 for 屬性的狀態下，實現同樣的效果。

<form action="test.aspx" method="get" target="_blank">
  <label>帳號
    <input name="user">
  </label>
  <br>
  <label>密碼
    <input name="pwd">
  </label>
</form>

<label> 預設樣式

下方列出 <label> 的預設樣式：

label {
  cursor: default;
}

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• ChatGPT 教學
• Midjourney 教學
• HTML 教學