labelタグ -フォーム要素にラベルを関連付ける｜HTML辞典

<label>タグとは？

<label> タグは、フォーム要素（<input>、<textarea>、<select> など）にラベルを関連付けるためのタグ です。
ラベルをクリックすると、対応するフォーム要素にフォーカスが当たるため、ユーザーの入力操作を補助する役割 があります。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<label> は開始タグ（<label>）と閉じタグ（</label>）の両方が必要です。

基本的な記述方法

<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">

使用できる主な属性

<label> タグには少数の属性がありますが、for 属性が特に重要です。

属性名	説明	例
for	関連付けるフォーム要素の id を指定	<label for="email">メール</label>
form	ラベルが適用されるフォームの id を指定	<label form="loginForm">ログイン</label>

CSSを使ったデザイン変更

ラベルのスタイルを調整したい場合は、CSSを活用できます。

label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

適切な使用例

✅ for 属性を使用して <input> と関連付ける

<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">

✅ <label> タグ内に <input> を直接配置する（for 属性なしでも動作）

<label>
    <input type="checkbox" name="terms"> 利用規約に同意する
</label>

✅ form 属性を使用して異なるフォームの要素にラベルを関連付ける

<form id="userForm">
    <input type="text" id="username" name="username">
</form>
<label for="username" form="userForm">ユーザー名</label>

適切でない使用例（誤った使い方）

❌ for 属性を設定しないとラベルとフォーム要素が関連付かない

<!-- NG: for属性なし -->
<label>メールアドレス:</label>
<input type="email" name="email">

✅ 正しい書き方（for 属性を設定）

<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">

❌ for の値が <input> の id と一致しないと機能しない

<!-- NG: for属性の値がidと一致していない -->
<label for="wrongID">名前:</label>
<input type="text" id="username" name="username">

✅ 正しい書き方（for の値を id に一致させる）

<label for="username">名前:</label>
<input type="text" id="username" name="username">

<label>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<label>	フォーム要素にラベルを関連付ける	for 属性を使用	フォームの入力補助
<legend>	<fieldset> のタイトルを定義	<fieldset> の見出し	フォームグループの説明
<span>	インライン要素のグループ化	特別な意味を持たない	テキストの装飾
<p>	段落を作成	ブロック要素	説明文の記述

使用上の注意点

✅ for 属性を使ってフォーム要素と適切に関連付ける

• クリック時に正しくフォーカスが当たるようにする。

✅ <label> を <input> の外側に置くか、内側に入れて関連付ける

• for を使うか、ラベルの中に直接 <input> を配置する方法がある。

関連タグ

• <input> – 1行のテキスト入力
• <textarea> – 複数行のテキスト入力
• <select> – ドロップダウンリスト
• <fieldset> – フォーム要素のグループ化

まとめ

<label>タグは、HTML文書内で フォーム要素（<input> など）にラベルを関連付けるためのタグ です。
for 属性を使用することで、クリック時に適切なフォーム要素にフォーカスを当てることができます。