HTML <label> タグ

例

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

<form action="demo_form.html">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>

Try it Yourself ❯

定義と用法

<label> タグは、<input> 要素のラベルを定義します。

<label> 要素は、ユーザに何か特別なものをレンダリングする訳でもありません。しかしながら、<label> 要素内のテキストをクリックした場合でも、コントロールが切り替わるような、マウスのユーザに対する、ユーザビリティの向上が提供されるようになります。

<label> タグの for 属性は、関連する要素にバインドするためには、その要素の id 属性と同じでなければなりません。

ブラウザ・サポート

要素
<label>	Yes	Yes	Yes	Yes	Yes

チップスと注意事項

チップ:ラベルは、"for" 属性を使用するか、または <label> 要素内に要素を配置するかのいずれかにより、要素とバインドすることができます。

HTML 4.01 と HTML5 の相違点

"form" 属性は、HTML5 で新しく追加されました。

属性

= HTML5 で新規追加。

属性	値	説明
for	element_id	ラベルにバインドするフォーム要素を指定する
form	form_id	ラベルが属する 1 つ以上のフォームを指定する

グローバル属性

<label> タグは、HTML のグローバル属性もサポートします。

イベント属性

<label> タグは、HTML のイベント属性もサポートします。

デフォルトの CSS 設定

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

例

label {
cursor: default;
}