ラベルタグlabel

タグ label は、 input、 textarea、 select などの入力フィールドに対するラベルを定義します。

ラベルは、属性 for を使用して特定の入力フィールドに関連付けられます。この属性には、関連付けたい入力フィールドの id 属性の値を指定します。また、要素を label タグの内部に配置することでもラベルを関連付けることができます。この場合、属性 for を指定する必要はありません。詳細は例を参照してください。

ラベルをクリックすると、関連付けられたチェックボックスやラジオボタンの状態が（チェック済みから未チェックへ、またはその逆に）切り替わります。この場合のラベルは利便性のためです。小さなフォーム要素にカーソルを合わせるのは難しいですが、長いテキストを含むラベルであれば遥かに簡単です。

ラベルに関連付けられたテキスト入力フィールド（input や textarea タイプ）は、入力フォーカスを受け取ります。フォーカスとは、カーソルが入力フィールド内で点滅している状態です。この状態でキーボードで何かを入力すると、そのテキストはこのフィールドに入力されます（フォーカスのより高度な理解については、疑似クラス focus を参照してください）。

label タグは、チェックボックスやラジオボタンを模倣するためにも使用できます。これは、CSSでは禁止されている（しかし巧妙な手法で可能な）カスタムデザインのcheckboxやradioを作成するために必要です。

属性

属性	説明
for	この属性には、ラベル label が関連付けられる入力フィールドのid属性の値を指定します。
accesskey	ラベルに関連付けられた（for属性を通じて）フォーム要素へ移動するためのホットキーを設定します。 詳細は、属性 accesskey を参照してください。

例 . チェックボックス

チェックボックス checkbox に、属性 for を使用してラベルを関連付けてみましょう。ラベルをクリックすると、チェックボックスの状態（チェック済み/未チェック）が切り替わるのがわかります：

:

例 . label内に配置

今度は、属性 for を通じて関連付ける代わりに、要素を直接 label タグ内に配置してみましょう。この場合も、label のテキストをクリックすることで要素をアクティベートできます：

:

例 . テキスト入力フィールド

タグ input に、属性 for を使用してラベルを関連付けてみましょう。ラベルをクリックすると、入力フィールドがフォーカスを受け取ります。この時、フィールド内のテキスト（属性 value を使用して追加）は選択（ハイライト）状態になります。キーボードで何かを入力すると、このテキストは消去されます。テキストを消さずに選択状態を解除するには、入力フィールドをマウスでクリックします。これでフォーカスは失われませんが、選択は解除されます：

:

関連項目