試一試
<div class="preference">
<label for="cheese">I like cheese.</label>
<input type="checkbox" name="cheese" id="cheese" />
</div>
<div class="preference">
<label for="peas">I like peas.</label>
<input type="checkbox" name="peas" id="peas" />
</div>
.preference {
display: flex;
justify-content: space-between;
width: 60%;
margin: 0.5rem;
}
屬性
此元素包含全域性屬性。
for-
該值是同一文件中可標記表單控制元件的
id，將<label>與該表單控制元件關聯起來。請注意，其 JavaScript 反射屬性是htmlFor。
用法說明
將標籤與表單控制元件關聯
文件中第一個 id 屬性與 for 屬性值匹配的元素是此 label 元素的帶標籤控制元件——如果具有該 id 的元素實際上是可標記元素。如果它不是可標記元素，則 for 屬性無效。如果文件中後面還有其他元素也匹配 id 值，則不予考慮。
透過多個 <label> 元素具有相同的 for 屬性值，可以使多個 <label> 元素與同一個表單控制元件關聯，從而為表單控制元件提供多個標籤。
將 <label> 與表單控制元件（例如 <input> 或 <textarea>）關聯具有一些主要優勢
- 標籤文字不僅在視覺上與其對應的文字輸入相關聯；它也在程式上與其相關聯。這意味著，例如，當用戶聚焦於表單輸入時，螢幕閱讀器會讀出標籤，這使得輔助技術使用者更容易理解應該輸入什麼資料。
- 當用戶點選或觸控/輕觸標籤時，瀏覽器會將焦點傳遞給其關聯的輸入（相應的事件也會針對該輸入觸發）。這種增加的聚焦輸入的點選區域為任何嘗試啟用它的人（包括使用觸控式螢幕裝置的人）提供了優勢。
有兩種方法可以將 <label> 與表單控制元件關聯，通常稱為顯式關聯和隱式關聯。
要將 <label> 元素與 <input> 元素顯式關聯，首先需要向 <input> 元素新增 id 屬性。接下來，向 <label> 元素新增 for 屬性，其中 for 的值與 <input> 元素中的 id 相同。
<label for="peas">I like peas.</label>
<input type="checkbox" name="peas" id="peas" />
或者，您可以將 <input> 直接巢狀在 <label> 內部，在這種情況下不需要 for 和 id 屬性，因為關聯是隱式的
<label>
I like peas.
<input type="checkbox" name="peas" />
</label>
注意： <label> 元素可以同時具有 for 屬性和包含的控制元件元素，只要 for 屬性指向包含的控制元件元素。
這兩種方法是等效的，但有一些注意事項
- 雖然常見的瀏覽器和螢幕閱讀器組合支援隱式關聯，但並非所有輔助技術都支援。
- 根據您的設計，關聯型別可能會影響樣式設定。將
<label>和表單控制元件設定為同級元素而不是父子關係意味著它們是獨立的、相鄰的框，從而可以透過網格或彈性佈局方法實現更可定製的佈局，例如將它們對齊。 - 顯式關聯要求表單控制元件具有
id，該id在整個文件中必須是唯一的。這尤其在元件化應用程式中很難做到。框架通常提供自己的解決方案，例如 React 的useId()，但這仍然需要額外的協調才能正確實現。
通常，我們建議使用帶有 for 屬性的顯式關聯，以確保與外部工具和輔助技術的相容性。實際上，您可以同時巢狀並提供 id/for 以實現最大相容性。
標籤所標記的表單控制元件稱為標籤元素的帶標籤控制元件。多個標籤可以與同一個表單控制元件關聯
<label for="username">Enter your username:</label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?</label>
可以與 <label> 元素關聯的元素包括 <button>、<input>（除了 type="hidden"）、<meter>、<output>、<progress>、<select> 和 <textarea>。
無障礙
互動式內容
除了隱式關聯的表單控制元件之外，不要在 <label> 內部放置其他互動式元素，例如 錨點 或 按鈕。這樣做會使人們難以啟用與 label 關聯的表單輸入。
不要這樣做
<label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions" />
I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>
更喜歡這樣做
<p>
<a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
<label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions" />
I agree to the Terms and Conditions
</label>
注意： 最好將任何必要的上下文（例如條款和條件的連結）放在表單控制元件之前，以便使用者在與控制元件互動之前可以閱讀它。
標題
在 <label> 中放置標題元素會干擾多種輔助技術，因為標題通常用作導航輔助。如果需要視覺上調整標籤的文字，請改用應用於 <label> 元素的 CSS 類。
如果表單或表單的某個部分需要標題，請使用放置在 <fieldset> 中的 <legend> 元素。
不要這樣做
<label for="your-name">
<h3>Your name</h3>
<input id="your-name" name="your-name" type="text" />
</label>
更喜歡這樣做
<label class="large-label" for="your-name">
Your name
<input id="your-name" name="your-name" type="text" />
</label>
按鈕
具有 type="button" 宣告和有效 value 屬性的 <input> 元素不需要關聯標籤。這樣做實際上可能會干擾輔助技術解析按鈕輸入的方式。這同樣適用於 <button> 元素。
示例
定義隱式標籤
<label>Click me <input type="text" /></label>
使用“for”屬性定義顯式標籤
<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />
技術摘要
規範
| 規範 |
|---|
| HTML # the-label-element |
瀏覽器相容性
載入中…