ラベルで結びつける

導入

入力欄には「何を入れる欄か」を示す ラベル を付けます。見た目の説明であると同時に、読み上げソフトが欄の意味を伝えるための大切な情報です。

説明

<label> の for 属性と、<input> の id 属性を 同じ値 にすると、両者が結びつきます。ラベルをクリックすると入力欄にカーソルが移ります。

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

for と id を一致させるのがポイントです。アクセシビリティ（誰にとっても使いやすいWeb）の第一歩です。

やってみよう

上の例を打ち込み、「お名前」の文字をクリックすると入力欄が選択されることを確かめましょう。

演習

for="mail" の <label>「メール」と、id="mail" の <input type="text"> を、結びつくように作ってください。