HTMLの<label>タグは、フォーム入力欄に説明をつけるために使うタグです。ユーザーが「ここには何を入力すればいいのか」をわかりやすくするために重要な役割を果たします。

🔰<label>タグってなに？

<label>タグは、テキスト入力やパスワード入力など、フォーム部品に「名前」や「説明」を付けるためのHTMLタグです。

たとえば、名前入力欄を作る場合：

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

このように<label>とfor属性を使うことで、「このラベルはこの入力欄の説明です」と関連づけることができます。

✅ 基本の使い方（2パターン）

① for属性を使う方法（推奨）

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

for="email"は、id="email"のと紐づいています。
ラベルをクリックすると、入力欄が自動的に選択されるようになります。

② 入れ子（ネスト）にする方法

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

この書き方ならfor属性もidも不要です。ラベルと入力欄が一緒に書かれているので、自動で関連づけられます。

🎯 <label>を使うメリット

• ユーザーが使いやすくなる（ラベルをクリックすると入力欄が選ばれる）
• アクセシビリティが向上（視覚障がいの方の支援技術に対応）
• SEOにも効果的（HTML構造が整って評価されやすくなる）

⚠ よくあるミス

• for属性とidが一致していない → ラベルが機能しない
• labelタグを使っていない → 使いにくいフォームになる

🧪 実践！ラベル付きフォームの完成形（コピペOK）

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

  <label for="password">パスワード:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="submit" value="ログイン">
</form>

📌 まとめ：<label>タグのポイント

フォームを作るときは、必ず<label>タグを使うようにしましょう！見た目だけでなく、使いやすさや評価にも大きく影響します。