＜label要素＞ - ラベル

公開日: 2017/02/09

label要素はラベルを表す要素です。キャプションとフォームコントロールを関連付けることができます。

概要

名前

label

カテゴリー

Flow content

Phrasing content

Interactive content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLLabelElement

デフォルトのスタイル

label {
	cursor: default;
}

仕様書

https://html.spec.whatwg.org/multipage/forms.html#the-label-element

属性

for

ラベルを関連付けたい要素のidを指定する。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

label要素は、フォームコントロール(input要素など)のキャプションの役割を果たします。見出しや説明となるテキストを含めましょう。一般的なブラウザは、キャプションをクリックするとそのフォームコントロールにフォーカスします。基本的な使い方としては、キャプションを表すテキストとフォームコントロールをそのまま囲みます。

HTML

<p>キャプションをクリックするとフォーカスします。</p>

<!-- 名前の入力フォームであることを示す -->
<label>名前: <input type="text"></label>

デモを開く

囲めない場合は、for属性にidを指定することで関連付けることができます。

HTML

<p>キャプションをクリックするとフォーカスします。</p>

<!-- 名前の入力フォームであることを示す -->
<p><label for="syncer">名前</label></p>

<!-- 離れたところにあるフォームコントロール -->
<p><input type="text" id="syncer"></p>

デモを開く

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜label要素＞ - ラベル</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/label/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>label要素は、フォームコントロールのキャプションを表す要素です。クリックすると、関連付いているフォームコントロールにフォーカスします。</p>

<h2>囲んだ場合</h2>
<p><label>名前: <input type="text"></label></p>

<h2>for属性で指定した場合</h2>
<p><label for="syncer">名前</label></p>
<p><input type="text" id="syncer"></p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/652/"> <meta charset="utf-8"> <title>【デモ】＜label要素＞ - ラベル</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/label/"> </head> <body>

<p>label要素は、フォームコントロールのキャプションを表す要素です。クリックすると、関連付いているフォームコントロールにフォーカスします。</p> <h2>囲んだ場合</h2> <p><label>名前: <input type="text"></label></p> <h2>for属性で指定した場合</h2> <p><label for="syncer">名前</label></p> <p><input type="text" id="syncer"></p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>