<label>：標籤元素

將<label>與表單控制元件（如<input>或<textarea>）關聯可以帶來一些主要優勢。

• 標籤文字不僅在視覺上與相應的文字輸入相關聯，而且在程式上也與之相關聯。這意味著，例如，當用戶將焦點放在表單輸入上時，螢幕閱讀器會讀出標籤，使輔助技術使用者更容易理解應該輸入什麼資料。
• 當用戶點選或觸控/點選標籤時，瀏覽器會將焦點傳遞到其關聯的輸入（相應的事件也會為輸入觸發）。這種增加的輸入聚焦區域為任何試圖啟用它的人提供了優勢——包括使用觸控式螢幕裝置的人。

要顯式地將<label>元素與<input>元素關聯，首先需要將id屬性新增到<input>元素。接下來，將for屬性新增到<label>元素，其中for的值與<input>元素中的id相同。

或者，您可以將<input>直接巢狀在<label>內部，在這種情況下，不需要for和id屬性，因為關聯是隱式的。

<label>
  Do you like peas?
  <input type="checkbox" name="peas" />
</label>

標籤所標記的表單控制元件稱為標籤元素的被標記控制元件。多個標籤可以與同一個表單控制元件關聯。

<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>。

此元素包含全域性屬性。

for

for屬性的值必須是與<label>元素在同一文件中的可標記表單相關元素的單個id。因此，任何給定的label元素只能與一個表單控制元件關聯。

注意：要以程式設計方式設定for屬性，請使用htmlFor。

文件中第一個具有與for屬性值匹配的id屬性的元素是此label元素的被標記控制元件——如果具有該id的元素實際上是可標記元素。如果它不是可標記元素，則for屬性無效。如果文件中還有其他元素也匹配id值，則不會考慮它們。

多個label元素可以為其for屬性賦予相同的值；這樣做會導致關聯的表單控制元件（for值引用的表單控制元件）具有多個標籤。

注意：只要for屬性指向包含的控制元件元素，<label>元素就可以同時具有for屬性和包含的控制元件元素。

<label>元素沒有特殊的樣式考慮——結構上它們是簡單的內聯元素，因此可以像<span>或<a>元素一樣進行樣式設定。您可以透過任何方式應用樣式，只要您不會導致文字難以閱讀。

不要在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>

更喜歡這樣做

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>

在<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>元素，情況也是如此。