HTML <label> タグ

定義と使用方法

<label> ラベルはinput要素にラベル（マーク）を定義します。

ラベル要素はユーザーに特別な効果を表示しませんが、マウスユーザーのためのユーザビリティを向上させます。ラベル要素内のテキストをクリックすると、このコントロールがトリガーされます。つまり、ユーザーがこのラベルを選択すると、ブラウザが自動的にラベルに関連するフォームコントロールに焦点を合わせます。

<label> ラベルの for属性 関連する要素のid属性と同じでなければなりません。

<label> ラベルは複数の要素にタグ（マーク）を定義できます：

上記の要素とラベルの正しい使用方法は以下のユーザーに有益です：

  • スクリーンリーダーを使用するユーザー（要素に焦点を合わせると、タグを読み上げる場合）
  • 非常に小さいエリア（例えば、チェックボックス）をクリックするのが難しいユーザー - なぜなら、ユーザーがクリック} <label> テキストが要素内に存在する場合、それが入力フィールドを切り替えます（これによりクリックエリアが増えます）

参照も：

HTML DOM 参考マニュアル：Label オブジェクト

例

ラベル付きの3つのラジオボタン：

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="提出">
</form>

自分で試してみる

ヒントとコメント

ヒント：<label> のfor属性が関連する要素のid属性と一致する必要があります。これらをバインドするために、要素を配置することもできます。 <label> 要素内にタグをバインドするために、属性を使用します。

属性

属性 値 説明
for 要素 id labelがどのフォーム要素にバインドされるかを指定します。
form フォーム id labelフィールドが属するフォームを指定します。

グローバル属性

<label> タグは以下のイベント属性をサポートしています HTMLのグローバル属性。

イベント属性

<label> タグは以下のイベント属性をサポートしています HTMLのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値を使用して表示します <label> 要素：

label {
  cursor: default;
}

自分で試してみる

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート