HTML <label> 標籤元素

在HTML網頁可使用選單元素<label>來表示輸入欄位的標題。

下面是簡單的<label>範例。

<label for="username">使用者名稱: </label>
<input id="username">

<hr>

<label for="addr">地址: </label>
<input id="addr">

顯示如下。

使用者名稱:

---

地址:

<label>的for屬性用來關聯到一個輸入欄位，把for的值設為與被關聯元素的id值相同即可。

例如上面範例中<label>的for值為addr，而addr等於下面輸入欄位<input>的id值。所以上面的<label>即與下面的<input>建立關聯。

當用滑鼠點擊網頁上<label>表示的標題文字時，網頁會自動把輸入游標移至所關聯的輸入欄位。
例如上例當點選「使用者名稱」或「地址」時，右側被關聯的輸入欄位會被focus並出現輸入游標。此即為<label>的關聯效果。

不是所有的HTML元素都能使用<label>來關聯。能被<label>關聯的輸入元素稱為labelable elements。

labeled elements包含以下元素。

• <input>（不含<input type="hidden">）
• <button>
• <textarea>
• <output>
• <meter>
• <progress>

參考：

• The label element