網頁

2019/8/13

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>

參考:

沒有留言:

張貼留言