フォームには必ずラベルを

入力欄だけがぽつんとあって、何を入れるのか分からない——フォームのつまずきの多くは、ラベルの不足です。<label>は読み上げソフトに「この欄は何か」を伝え、さらにクリックできる範囲を広げる、全員が得するタグです。

体験してみよう：ラベルはタップ範囲を広げる

チェックボックスで効果がいちばん体感できます。文字のほうをクリックしてみてください。

書き方は2とおり

囲むのがいちばん簡単です。

<label>なまえ
  <input type="text" name="name" />
</label>

デザインの都合で離して置きたいときは、forとidでひもづけます。

<label for="name">なまえ</label>
<input type="text" id="name" name="name" />

forの値とidの値をそろえるのがポイント。どちらの書き方でも効果は同じです。

placeholderはラベルの代わりにならない

うすい文字のヒント（placeholder）だけで済ませたフォーム、よく見かけます。

<input type="text" placeholder="なまえ" />  <!-- ❌ ラベルの代わりにはならない -->

これがダメな理由は3つあります。

• 入力を始めると消える——「あれ、何を入れる欄だっけ？」が起きる
• 色が薄い——前々回のコントラストの合格ラインをまず満たしていない
• 読み上げソフトによっては読まれないことがある

placeholderは「例：しまちゃん」のような入力例にとどめ、名札はかならず<label>で。

このレッスンのまとめ

1. すべての入力欄に<label>——読み上げに伝わり、押せる範囲も広がる
2. 書き方は「囲む」か「forとidでつなぐ」の2とおり
3. placeholderは入力例。ラベルの代わりにしない