HTMLでフォームを作るとき、入力欄の近くへ「お名前」「メールアドレス」と文字を書くだけでは、その文字と入力欄の関係はHTML上で伝わりません。<label>タグを使うと、項目名とinputなどのフォーム部品を正式に関連付けられます。
labelのforとフォーム部品のidへ同じ値を書くのが、初心者におすすめの基本形です。正しく関連付けると、項目名をクリックして入力欄を選べます。文字を入力できる状態にすることを「フォーカスを移す」といい、読み上げソフトにも項目の意味が伝わりやすくなります。
この記事では、基本の書き方から部品ごとの使い方、動かないときの確認方法まで説明します。初めて書く方は「forとidでinputを関連付ける書き方」へ、まず試したい方は「labelの動作を試す練習コード」へ進んでください。すでに動かないコードがある方は「labelが機能しないときの確認方法」から、自分の症状に合う箇所を選べます。
- labelタグの役割とフォームで使うメリット
- forとidでinputを関連付ける3つの手順
- for・idを使う方法とlabelで囲む方法の違い
- checkbox・radio・select・textareaでの使い方
- labelが機能しないときに確認する順番
labelタグとは？フォーム部品の項目名を示すHTML要素
<label>は、入力欄、チェックボックス、プルダウンなどのフォーム部品に付ける項目名を表すHTML要素です。たとえば、次の「メールアドレス」という文字がlabelです。
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">labelは見た目の文字を置くだけではありません。for="email"がid="email"を指すことで、「この項目名はこの入力欄の説明である」という関係をブラウザーや支援技術へ伝えます。MDNのlabel要素リファレンスでも、ユーザーインターフェイスの項目のキャプションを表す要素として説明されています。
labelのメリット
labelとフォーム部品を関連付ける主なメリットは、次の3つです。
- 何を入力・選択する項目なのかを画面上に残せる
- 読み上げソフトなどが入力欄と項目名の関係を扱いやすくなる
- labelの文字をクリック・タップしても対象を操作できる
labelを使うと、小さな入力部品だけでなく項目名の文字もクリック・タップに使えます。特にcheckboxやradioでは、狙える範囲が広がるため操作しやすくなります。
labelと見た目の調整
labelタグを付けても、枠線や余白が自動で整うわけではありません。labelの役割はフォーム部品へ意味を与えることで、文字の大きさや配置はCSSで調整します。
フォーム全体の役割から整理したい場合は、HTMLフォームとform・input・label・buttonの違いもあわせて確認してください。
forとidでinputを関連付ける書き方
初めて書く場合は、labelのforとinputのidを使う「明示的な関連付け」を基本にします。これから示す短いコードは、HTMLの<body>と</body>の間に置く部品の例です。まだHTMLファイルがない方は、後半の「labelの動作を試す練習コード」にあるコード全体で試してください。
最初に、関連付けたいinputへid属性を付けます。属性はタグに追加する設定で、idは要素を識別する名前です。この例ではemailとします。
<input type="email" id="email" name="email">次に、labelのfor属性へinputのidと同じ値を書きます。
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">for="email"とid="email"は、大文字小文字やハイフンを含めて完全に一致させます。この例のidはemailなので、forにもemailだけを書きます。CSSの指定のような#は付けず、for="#email"にはしません。
編集したHTMLファイルを保存し、ブラウザーで開きます。すでに開いていた場合は再読み込みしてください。「メールアドレス」の文字をクリックし、対応する入力欄へ文字を入力できれば成功です。動かなければ入力欄を直接クリックできるかも確かめ、後半の「labelが機能しないときの確認方法」へ進みます。
for・id・nameの違い
for・id・nameは同じ文字列にすることもありますが、担当する役割は別です。
| 属性 | 役割 | この例での値 |
|---|---|---|
for | label側から関連付け先を指す | email |
id | ページ内でフォーム部品を識別する | email |
name | フォーム送信時の項目名になる | email |
forとidは画面上の関連付けに使い、nameは送信データに使います。nameが一致してもlabelは関連付かず、idだけでは通常のフォーム送信時の項目名になりません。inputの属性を詳しく確認したい方は、HTMLのinputタグとtype・name・valueの書き方も参考にしてください。
forは相手を指し、idは部品を識別し、nameは送信項目を作ると分けて覚えましょう。3つが同じ文字列でも、HTML上の役割は別です。
idの重複
idは文書全体で重複しない識別子です。input同士だけでなく、divなど別の要素とも同じidを使わないようにします。たとえば同じページにid="email"が複数あると、意図しない要素が先に見つかり、入力欄へ関連付かない原因になります。
既存ページのidを変える前に元のHTMLを控えてください。同じidを参照するCSS（見た目の指定）やJavaScript（動作の指定）がある場合は、参照先も合わせて確認します。練習では下のコードを新しいファイルに保存すれば、既存ページへ影響せず試せます。
同じページ内では、一つのidを一つの要素だけに使います。項目が複数ある場合は、email、confirm-email、billing-emailのように役割が分かる別の値を付けましょう。詳しいルールはMDNのidグローバル属性で確認できます。
forとidを使う方法・labelで囲む方法の違い
labelとフォーム部品の関連付けには、次の2つの方法があります。両方を順番に実行する手順ではありません。初めて作る場合は明示的な方法を選び、すでに正しく動く暗黙的なコードは、この説明だけを理由に書き換える必要はありません。
| 方法 | 書き方 | 特徴 |
|---|---|---|
| 明示的な関連付け | forとidを一致させる | labelとinputを離して配置でき、構造を追いやすい |
| 暗黙的な関連付け | inputをlabelの内側へ入れる | forとidなしでも関連付くが、親子構造になる |
forとidを使う方法
<label for="user-name">お名前</label>
<input type="text" id="user-name" name="user_name">labelとinputを別々の要素として書けるため、CSSでそれぞれの位置を調整しやすい方法です。コード上でも、forがどのidを指しているかを確認できます。
labelで囲む方法
<label>
お知らせメールを受け取る
<input type="checkbox" name="newsletter" value="yes">
</label>この例はforを省略しているため、labelの内側にあるinputが関連付け先になります。labelとinputが親子の構造になるので、両者を別の場所へ配置したいレイアウトでは扱いにくい場合があります。forを書く場合は、囲む方法でも正しいidを指す必要があります。誤ったforがあっても、内側のinputへ自動で関連付くわけではありません。
迷ったら、forとidを使う明示的な関連付けを基本にします。MDNとW3C WAIも、支援技術との互換性を確保しやすい方法として明示的な関連付けを案内しています。
初めて作るフォームでは明示的な関連付けを標準形にすると、コードレビューやレイアウト変更でも関係を追いやすくなります。
labelと関連付けられる要素
labelはinputだけのための要素ではありません。HTML仕様上、次のような「ラベル付け可能要素」と関連付けられます。
| 要素 | 主な用途 | 実務上のポイント |
|---|---|---|
input（type="hidden"を除く） | 1行入力、checkbox、radioなど | typeに合う項目名を付ける |
select | 候補から選ぶ | プルダウンの質問をlabelで示す |
textarea | 複数行の文章を入力する | 「お問い合わせ内容」など入力の目的を書く |
meter・progress・output | 測定値、進捗、計算結果 | 何の数値かをlabelで示す |
button | 送信や画面内の操作 | 通常はbutton内の文字自体を名称にする |
selectとtextareaでも、forとidの基本は同じです。
<label for="topic">お問い合わせ種別</label>
<select id="topic" name="topic">
<option value="question">質問</option>
<option value="request">制作の相談</option>
</select>
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="4"></textarea>選択肢の作り方はHTMLのselectタグとoption・value・selectedの書き方、複数行入力はHTMLのtextareaタグとrows・cols・placeholderの書き方で詳しく解説しています。
buttonは仕様上ラベル付け可能ですが、通常は<button>送信する</button>の「送信する」のように、button自身の内容で目的を示します。ボタンの書き方はHTMLのbuttonタグとtype・submit・resetの違いを確認してください。
checkbox・radioでlabelを使う書き方
checkbox（チェックボックス）は項目ごとにオン・オフを選び、radio（ラジオボタン）は同じグループから一つを選びます。部品が小さいため、選択肢の文字からも操作できるlabelが役立ちます。
checkboxの項目名
<input
type="checkbox"
id="newsletter"
name="newsletter"
value="yes"
>
<label for="newsletter">お知らせメールを受け取る</label>checkboxでは、四角だけでなく選択肢の文字をクリックしても、チェックのオン・オフを切り替えられます。
radioの質問名と選択肢名
radioが複数あるときは、項目をまとめるfieldsetと、そのまとまりの名前を示すlegendを使います。各選択肢には個別のlabelを付けます。同じグループで別の選択肢を選ぶと、選択がそちらへ移ります。選択中のradioをもう一度押しても、checkboxのようにオフにはなりません。
<fieldset>
<legend>希望する連絡方法</legend>
<div>
<input
type="radio"
id="contact-email"
name="contact_method"
value="email"
>
<label for="contact-email">メール</label>
</div>
<div>
<input
type="radio"
id="contact-phone"
name="contact_method"
value="phone"
>
<label for="contact-phone">電話</label>
</div>
</fieldset>
「メール」を選んだ状態の図解です。下の練習コードは未選択の状態から始まります。
質問全体はlegend、各選択肢はlabelと役割を分けます。radioのnameは同じグループで共通にし、idは選択肢ごとに変えます。
labelとplaceholderの違い
placeholderは、入力欄が空のときに入力例や短いヒントを表示する属性です。項目名を表すlabelとは役割が異なります。
<label for="email">メールアドレス</label>
<input
type="email"
id="email"
name="email"
placeholder="a@example.com"
>この例では、「メールアドレス」が項目名で、a@example.comが入力形式の例です。文字を入力するとplaceholderは見えなくなりますが、labelは画面に残ります。
入力前後の表示を整理した図解です。実際の入力欄の見た目はブラウザーによって異なります。
placeholderだけで項目名を示さず、labelを常に用意します。入力中に項目名が消えると、何を入力している欄かを確認しにくくなり、アクセシビリティも損ねます。MDNのplaceholder属性の解説でも、labelの代わりに用いないよう案内されています。
labelは項目名、placeholderは入力例や形式の補助です。両方を使う場合も、同じ説明を繰り返すのではなく役割を分けましょう。
labelタグのアクセシビリティと注意点
アクセシビリティは、さまざまな利用者が情報を理解し、操作できるようにすることです。labelでは、正しい関連付けに加えて、項目名の内容と内側の構造も確認します。
分かりやすい項目名
「入力」「項目1」のような曖昧な文字ではなく、「お名前」「返信先メールアドレス」「お問い合わせ内容」のように、何を入力する欄か分かる名前を書きます。
W3C WAIのフォームコントロールとlabelを関連付けるH44では、labelのforとフォーム部品のidを一致させる方法や、クリック領域が広がる利点が説明されています。
リンクや別のボタンの位置
labelでフォーム部品を囲む場合、内側の部品は関連付け先の一つだけにし、別の入力部品やlabelは入れ子にしません。リンクや別のbuttonも内側にあると、入力部品の操作と区別しにくくなります。利用規約へのリンクは次のようにlabelの外へ分けます。/termsは記述例なので、自分のサイトの利用規約URLへ置き換えてください。
<p><a href="/terms">利用規約を読む</a></p>
<input type="checkbox" id="agree" name="agree" required>
<label for="agree">利用規約に同意する</label>見出しの位置
h2やh3などの見出しはページ内の構造と移動に使われるため、labelの内側へ入れません。項目名を目立たせたい場合は、labelへclassを付けてCSSで見た目を調整します。複数の選択肢に質問見出しが必要なら、fieldsetとlegendを使います。
labelの動作を試す練習コード
この練習はパソコンでHTMLファイルを保存して試すものです。用意するのは、テキストエディターとブラウザーだけです。WordPress、サーバー、アカウントは必要ありません。スマートフォンだけで読む場合は、コードと図解で関係を確認し、保存・実行はパソコンで行ってください。
まず、テキストエディターで新しいファイルを作ります。VS CodeならWindowsはCtrl＋N、MacはCommand＋Nで新規作成できます。Macのテキストエディットを使う場合は「ファイル」→「新規」で書類を作り、「フォーマット」→「標準テキストにする」を選んでから貼り付けます。使っているエディターに合う方だけ行ってください。
下の<!doctype html>から</html>までをまとめてコピーし、新しいファイルへ貼り付けます。前の章の短い例を追加で混ぜるとidが重複するため、この練習コードだけを使います。
文字コード（文字の保存方式）はUTF-8を使います。VS Codeでは画面下の文字コード表示を確認し、UTF-8以外なら表示をクリックして、別の文字コードで保存する項目からUTF-8を選びます。
デスクトップなど見つけやすい場所へlabel-practice.htmlという名前で保存します。VS Codeの保存はWindowsがCtrl＋S、MacがCommand＋Sです。Macのテキストエディットで拡張子を尋ねられたら「.htmlを使用」を選びます。末尾が.html.txtになっていないことを確認してください。
保存先のフォルダーからlabel-practice.htmlを、開いているブラウザーのウィンドウへドラッグします。「labelの動作を試す」という見出しと入力欄・選択欄が表示されれば、練習を始められます。コードが文字のまま表示される場合は、ファイル名の末尾と、標準テキストで保存したかを確認します。この記事内のコード枠は入力画面ではありません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>labelの練習</title>
</head>
<body>
<h1>labelの動作を試す</h1>
<p>画面内だけで試す練習です。送信はしません。</p>
<p>
<label for="email">メールアドレス</label><br>
<input type="email" id="email" name="email"
placeholder="a@example.com">
</p>
<p>
<label for="topic">お問い合わせ種別</label><br>
<select id="topic" name="topic">
<option value="question">質問</option>
<option value="request">制作の相談</option>
</select>
</p>
<p>
<label for="message">お問い合わせ内容</label><br>
<textarea id="message" name="message" rows="4"></textarea>
</p>
<p>
<input type="checkbox" id="newsletter"
name="newsletter" value="yes">
<label for="newsletter">お知らせメールを受け取る</label>
</p>
<fieldset>
<legend>希望する連絡方法</legend>
<p>
<input type="radio" id="contact-email"
name="contact_method" value="email">
<label for="contact-email">メール</label>
</p>
<p>
<input type="radio" id="contact-phone"
name="contact_method" value="phone">
<label for="contact-phone">電話</label>
</p>
</fieldset>
</body>
</html>この練習はlabelの動作だけを確かめるため、formと送信ボタンを置いていません。メールは届かず、入力内容も送信されません。実際のお問い合わせフォームには、送信先と受信・メール送信の処理が別途必要です。
「メールアドレス」の文字をクリックし、その入力欄へ文字を入力できることを確かめます。「お問い合わせ内容」も項目名をクリックし、複数行の入力欄に「練習です」と入力してください。「お問い合わせ種別」は項目名をクリックしたあと、上下の矢印キーなどで選択を変えられるか確認します。候補の開き方はブラウザーによって異なるため、クリックで一覧が開くことだけを成功条件にはしません。
メールアドレス欄に練習用のb@example.comを入力します。薄い入力例が消えても「メールアドレス」という項目名が残れば、labelとplaceholderの役割を確認できています。
「お知らせメールを受け取る」を2回クリックし、チェックが付いてから外れることを確かめます。続けて「メール」「電話」を順にクリックし、丸い選択印が一方から他方へ移ることを確認します。選択中のradioをもう一度クリックしてもオフにならないのは通常の動作です。
項目名から対応する部品を操作でき、入力後も項目名が残り、チェックと選択印が上記のように変われば、この練習は完了です。直すべき症状がなければ、次のトラブル確認を行う必要はありません。コードを変更してもう一度試すときは、エディターで保存してからブラウザーを再読み込みします。
labelが機能しないときの確認方法
まず、項目名ではなく入力欄そのものを直接クリックしてみます。次の症状から確認先を選び、直したら元のHTMLを保存してブラウザーを再読み込みし、同じ操作で再確認してください。正常になった時点で終了して構いません。
- 入力欄を直接押せば使えるが、項目名からは使えない：下の
for・id・nameの例と、関連付け先の要素を確認します。 - 項目名を押すと別の入力欄へ移る：ページ内の
idの重複を確認します。input以外の要素も対象です。 - 入力欄自体を直接押しても使えない：
forだけの問題とは限りません。末尾の「表示中のHTMLと無効化の確認」へ進みます。 radioをもう一度押しても選択が消えない：通常の動作です。「メール」から「電話」へ切り替えられれば、解除のための修正は不要です。
項目名だけが反応しない場合は、次の順に確認します。
- labelの
forとフォーム部品のidが完全に一致しているか - 同じ
idをページ内で複数回使っていないか forがdivではなくinput・select・textareaなどのラベル付け可能要素を指しているか- 編集したHTMLを保存し、ブラウザーを再読み込みしたか
- それでも直らなければ、下記の方法でブラウザーが表示に使っているHTMLを調べる
forとidの不一致
<!-- 関連付かない -->
<label for="user-email">メールアドレス</label>
<input type="email" id="email" name="email">user-emailとemailは別の値です。この例ではlabel側をfor="email"へ直します。
nameとidの取り違え
<!-- nameは一致しても、idがなければforから指せない -->
<label for="email">メールアドレス</label>
<input type="email" name="email">labelの関連付けに使うのはnameではなくidです。id="email"をinputへ追加します。
同じidの重複
<!-- id="email"が重複している -->
<input type="email" id="email" name="primary_email">
<input type="email" id="email" name="backup_email">primary-emailとbackup-emailのように、各要素へ別のidを付け、それぞれに対応するlabelを用意します。修正後は次の形になります。
<label for="primary-email">連絡先メールアドレス</label>
<input type="email" id="primary-email" name="primary_email">
<label for="backup-email">予備のメールアドレス</label>
<input type="email" id="backup-email" name="backup_email">表示中のHTMLと無効化の確認
WordPressなどでHTMLを自動生成する場合、編集元とブラウザーが表示に使うHTMLが異なることがあります。ここからは、コードを見ても原因が分からない場合だけの追加確認です。
パソコンのChromeで、問題の項目名を右クリックし「検証」を選びます。「要素（Elements）」に選ばれたlabelのforを確認してください。次に対応させたい入力欄を右クリックして「検証」を選び、そのinput・select・textareaのidと見比べます。この、ブラウザーが扱っている要素の構造をDOMと呼びます。
確認できたら検証画面を閉じ、修正は元のHTMLファイルやフォーム設定で行います。検証画面だけの書き換えは元のファイルの保存にはならず、再読み込みすると失われます。
入力部品自体を操作できない場合は、部品や、それを囲むfieldsetにdisabled（操作を無効にする属性）がないか確認します。disabledがなければ、上に重なる要素や、動作を変更するCSS・JavaScriptの影響も候補になります。
本番サイトでは、無効化の理由が分からないままdisabledを削除しないでください。練習コードでは動くのに自分のページだけ動かず、設定箇所を特定できない場合は、フォームを作った人やプラグインの案内で確認します。使っているブラウザー、該当の項目名、入力欄を直接押した結果を伝えると、labelの問題か別の問題かを切り分けやすくなります。
よくある質問
- すべてのinputにlabelが必要ですか？
-
テキスト入力、checkbox、radioなど、目的を説明する必要があるフォーム部品には、原則として分かりやすいlabelを用意します。
type="hidden"は画面上の入力部品ではないためlabelの対象外です。送信ボタンなどは、button内の文字やinputのvalueが名称になります。 - labelとinputは隣り合わせでなくても関連付けられますか？
-
はい。labelの
forとフォーム部品のidが同じHTML内で一致していれば（iframe内の別文書などを除く）、間に別の要素があっても明示的に関連付けられます。ただし、画面上ではどの項目名がどの入力欄か分かる近い位置へ置きましょう。 - idとnameは同じ値にする必要がありますか？
-
いいえ。idはページ内の識別とlabelの関連付け、nameはフォーム送信時の項目名です。同じ値でも別の値でも構いませんが、それぞれの役割を満たす必要があります。
- 一つのinputへ複数のlabelを付けられますか？
-
はい。複数のlabelで同じidをforに指定すると、一つのフォーム部品へ複数のlabelを関連付けられます。ただし、説明が重複して分かりにくくならないよう、通常は簡潔な一つの項目名を基本にします。
- inputをlabelで囲みながらforとidも書けますか？
-
はい。label内のフォーム部品をforが正しく指していれば併用できます。ただし、初心者はまずforとidによる明示的な関連付けか、labelで囲む暗黙的な関連付けのどちらか一方を正しく書けるようにすると理解しやすいでしょう。
- buttonにも外側のlabelタグが必要ですか？
-
通常は不要です。
<button type="submit">送信する</button>のように、buttonの内容へ目的が分かる文字を書きます。アイコンだけのボタンでは、見える文字または読み上げソフトへ伝わる名称を別途用意します。
まとめ
labelタグは、フォーム部品へ項目名を付け、画面上だけでなくHTML上でも関係を伝える要素です。
- labelの
forとフォーム部品のidへ同じ値を書く - idは同じページ内で重複させない
- for・idと送信用のnameは役割を分けて考える
- checkbox・radioでは選択肢の文字も操作できるようにする
- radioの質問全体はlegend、各選択肢はlabelで示す
- placeholderは入力例の補助にし、labelの代わりにしない
- 動かないときはfor／id、idの重複、対象要素を確認する
まずは練習コードを保存して開き、項目名から入力・選択できることを確かめましょう。動作を確認してから項目を一つずつ増やすと、関連付けのミスを早く見つけられます。
