入力欄の名前はどう付ける？labelで文字とフォームを結び付けよう

名前の入力欄の上に「お名前」と書いた。見た目では関係が分かるけれど、HTML上でも文字と入力欄が結び付いているだろうか？ labelを使うと、その入力欄が何のためのものかを関連付けられるよ。

目標は、項目名を押すと対応する入力欄へ移動できる小さなフォームを作ること。ブラウザだけで記事下の作例を試せる。作例には送信処理を用意していないので、本名ではなく「練習」などの架空の文字を使おう。

forとidを同じ値にする

<label for="nickname">表示名</label>
<input id="nickname" name="nickname" type="text">

labelのforに、入力欄のidと同じ値を書く。これで「表示名」という項目名と入力欄が結び付く。idはページ内でその要素を特定するための名前で、同じ値を複数に付けないようにするよ。

nameはフォーム送信などで値の項目名として使う指定。forが参照するのはnameではなくidなので、混同しないでね。

近くに文字があるだけの場合と比べる

作例には、二つの入力欄を並べている。一つ目の項目名は単なる文章、二つ目はlabelで関連付けた項目名だよ。

1. 最初の入力欄から離れた場所を押し、「文章だけの項目名」を押す。通常、その入力欄へはフォーカスが移らない。
2. 「関連付けた表示名」を押す。二つ目の入力欄へカーソルが入り、枠が変わる。
3. 架空の文字を入力する。項目名は消えずに残る。
4. Tabキーでも入力欄を移動できることを確認する。

ブラウザで項目名をクリックした後のdocument.activeElementを調べ、二つ目の欄へフォーカスが移ることを確認した。これはキーボード入力の対象を示す情報。画面読み上げソフトでの実機検証までを行ったものではないよ。

作例の「最初から試す」で入力内容は空に戻る。どの文字もサーバーへ送信する処理はない。

placeholderだけを項目名にしない

<label for="nickname">表示名</label>
<input id="nickname" type="text" placeholder="例：こより">

placeholderは、空の入力欄に出す短い入力例。入力すると消えるため、項目名そのものの代わりにしないほうが確認しやすい。何を入力した欄かを見返せるよう、見えるラベルを残そう。

補足が長い場合は、入力例へ詰めず、入力欄の近くに説明を置く。実際のフォームでは、その説明との関連付けも検討しよう。

クリックしても移らないとき

まずfor="nickname"とid="nickname"の綴りが一致しているか、同じidが別の場所にもないかを調べる。入力欄が無効化されていないか、ラベルの上に別の要素が重なっていないかも確認しよう。

labelの中に入力欄を入れる関連付け方法もある。ただ、最初はforとidの組み合わせで、対応する二つの名前を確認できる形にすると追いやすいよ。classとidの違いでもidの役割を比べてみてね。