HTML <label> 標籤
示例
三個帶有標籤的單選按鈕
<form action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="提交">
</form>
自己動手試一試 »
定義和用法
<label> 標籤定義了多個元素的標籤
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <meter>
- <progress>
- <select>
- <textarea>
正確使用上述元素的標籤將有利於
- 螢幕閱讀器使用者（當用戶聚焦於某個元素時，螢幕閱讀器會大聲朗讀該標籤）
- 難以點選非常小區域（例如複選框）的使用者——因為當用戶點選
<label>元素中的文字時，它會切換輸入（這增加了點選區域）。
提示和註釋
提示：<label> 的 for 屬性必須等於相關元素的 id 屬性才能將它們繫結在一起。 透過將元素放在 <label> 元素內部，也可以將標籤繫結到元素。
瀏覽器支援
| 元素 | |||||
|---|---|---|---|---|---|
| <label> | 是 | 是 | 是 | 是 | 是 |
屬性
| Attribute | 值 | 描述 |
|---|---|---|
| for | element_id | 指定標籤應繫結到的表單元素的 id |
| form | form_id | 指定標籤所屬的表單 |
全域性屬性
<label> 標籤也支援 HTML 中的全域性屬性。
事件屬性
<label> 標籤也支援 HTML 中的事件屬性。
相關頁面
HTML DOM 參考： Label 物件
預設 CSS 設定
大多數瀏覽器將 <label> 元素顯示為以下預設值
