HTML <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="Submit">
</form>

定義と使用法

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

上記の要素を含むラベルを適切に使用すると、次のようなメリットがあります。

スクリーンリーダーのユーザー（ユーザーが要素に焦点を合わせると、ラベルが読み上げられます）
非常に小さな領域（チェックボックスなど）をクリックするのが難しいユーザー-ユーザーが<label>要素内のテキストをクリックすると、入力が切り替わります（これによりヒット領域が増加します）。

ヒントと注意

ヒント：をバインドするには、のfor属性が<label> 関連する要素のid属性と同じである必要があります。要素を要素内に配置することにより、ラベルを要素にバインドすることもできます<label>。

ブラウザのサポート

Element
<label>	Yes	Yes	Yes	Yes	Yes

属性

Attribute	Value	Description
for	element_id	Specifies the id of the form element the label should be bound to
form	form_id	Specifies which form the label belongs to

グローバル属性

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

イベント属性

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

デフォルトのCSS設定

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

例

label {
cursor: default;
}

❮前へ完全なHTMLリファレンス次へ❯

HTMLリファレンス

HTML Tags