<label>タグについて

<label>とは？

<label>タグは、フォーム入力欄（<input>や<textarea>など）に対応する説明文（ラベル）を表示するためのタグです。
ラベルをクリックすると、対応する入力欄が自動的に選択されるようになります。

基本構文

<label for="入力欄のid">説明文</label>
<input id="入力欄のid" ... >
  

主な使い方

• for属性を使ってinputなどのid属性と関連付ける
• ラベルをクリックすると、対応する入力欄にフォーカスされる
• 視覚的にも機能的にもユーザビリティが向上

使用例

<form>
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="user_email"><br>

  <label for="msg">メッセージ：</label><br>
  <textarea id="msg" name="message"></textarea>
</form>
  

入れ子にする方法

<label>の中に<input>を直接含めることでfor属性を省略できます。

<label>
  名前：
  <input type="text" name="username">
</label>
  

アクセシビリティへの効果

• スクリーンリーダーがラベルの内容を読み上げやすくなる
• フォームの視認性と操作性が向上する
• 必須入力やエラー表示と組み合わせて使うことが多い

スタイル調整例（CSS）

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

注意点

• for属性の値は、inputなどのidと正確に一致させる
• 1つのlabelに対して1つの入力欄が原則
• 関連付けがないとクリック時に動作しない

まとめ

• <label>は入力欄に説明をつけるためのタグ
• for属性でidと連携すると操作性が向上
• アクセシビリティ・ユーザビリティの両面で重要
• 囲い込み（入れ子）でも使えるが、forのほうが推奨される