HTML講座 / labelとinputを正しく関連付ける

入力欄の名前を明確にするには、labelのforとinputのidを一致させます。idは文書内での識別、nameは送信時の項目名で、同じ役割ではありません。近くに文字を置いただけでは、入力欄との関連付けにならない点に注意します。

ラベルをクリックして確認する

次のコードをHTML文書のbodyへ入れて開き、「Name」をクリックします。対応する入力欄にフォーカスが移れば、明示的な関連付けが機能しています。

<form method="get">
  <label for="visitor-name">Name</label>
  <input id="visitor-name" name="name" type="text">
  <button type="submit">Check</button>
</form>

idは文書内で一意にします。重複すると別の欄を対象にする場合があります。Tabでも入力欄へ移動し、フォーカスの位置が見えるか確認してください。ラベルは装飾ではなく入力欄の名前であり、支援技術がどの欄か識別するためにも重要です。

idとnameの役割を分ける

例ではvisitor-nameがラベルの参照先、name="name"が送信時のキーです。クリックしても反応しないときはforとid、入力できるのに値が送られないときはnameを調べます。

IDをperson-nameへ変えるならforも同時に変えます。一方、サーバーが同じキーを期待するならnameは変えなくても構いません。送信される一覧の確認はFormDataを使う実習で行えます。

関連付けが切れた例を修正する

最初の断片はforがIDではなくnameと一致する誤りです。修正例ではperson-nameへ対応させます。二つは別のファイルで試してください。同じ文書へまとめるとIDが重複し、比較条件が崩れます。

<!-- Incorrect: for matches name instead of id -->
<label for="full_name">Name</label>
<input id="person-name" name="full_name">
<!-- Correct: for matches the input id -->
<label for="person-name">Name</label>
<input id="person-name" name="full_name">

修正後にラベルをクリックして正しい欄へ移動するかを確認し、送信時のキーはfull_nameのままかも比較します。見た目が同じでも、構造的な関連付けが違うことを確かめる実習です。

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

placeholderは未入力時の短い例やヒントです。入力すると消えるため、項目名や重要な条件の唯一の表示にしません。

<label for="email">Email address</label>
<input id="email" name="email" type="email"
       placeholder="name@example.com">

ラベルを残し、補足が必要なら入力中も読める説明を近くに置きます。フォームに案内文を付ける方法ではaria-describedbyで説明と関連付ける例も扱います。構文と関連付けの詳細はMDNのlabel要素で確認できます。