<label>
<label> は HTML の要素で、ユーザーインターフェイスの項目のキャプションを表します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| HTML 属性 | ||||||
| for 属性は label と output で利用できる属性です。 要素上で使用された場合、このラベルが説明するフォーム要素を示します。 要素上で使用された場合、その出力欄で使用される値を表す要素間の関係を明示的に示すことができます。 | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| HTMLLabelElement インターフェイスは label 要素を操作するための独自のプロパティへのアクセスを提供します。基底となる HTMLElement インターフェイスからメソッドとプロパティを継承しています。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLLabelElement.control は読み取り専用プロパティで、この label 要素に関連付けられているコントロールへの参照（HTMLElement 型のオブジェクトまたはその派生物のうちの 1 つ）を返します。ラベルがコントロールと関連付けられていない場合は null を返します。 | 6 | 18 | 4 | 5.1 | 18 | 5 |
| HTMLLabelElement.form は読み取り専用のプロパティで、このラベルに関連付けられたコントロールが所属するフォームを表す HTMLFormElement オブジェクトを返します。関連付けられたコントロールがないか、そのコントロールがフォーム内にない場合は null を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| HTMLLabelElement.htmlFor プロパティは for コンテンツプロパティの値を反映します。つまり、このスクリプトでアクセス可能なプロパティは、ラベルに関連付けられたコントロール要素の ID である for コンテンツプロパティの値を設定したり読み取ったりするために使用されます。 | 1 | 12 | 1 | 3 | 18 | 1 |
基本構文
<!-- bind with for attribute --> <label for="username">username:</label> <input type="text" id="username"> <!-- bind with nested attribute --> <label>email: <input type="email"></label>ライブデモ
label and formelement. associated
For attribute in label and inputelement.click in focusmove.
実務での使いどころ
-
<label> の活用
<label> は HTML の要素で、ユーザーインターフェイスの項目のキャプションを表します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。