小さなチェックボックスを押そうとして、何度か外してしまう。横の文字を押してみても、何も起きない。
フォームで、そんな経験はありませんか。
文字の方も押せるようにするのが、HTMLのlabelです。入力欄と項目名を結びつけることで、操作できる範囲が広がります。
labelが効かないときは、まずforとidが完全に一致しているか、同じidを使い回していないかを確認してください。 ただし、クリックして反応しない原因には、HTML以外のものもあります。
書き方だけでなく、「なぜ結びつける必要があるのか」から見ていきます。
labelがあると、小さな四角を狙わなくてよくなる
「利用規約に同意する」という文字の横に、小さなチェックボックスがあるとします。
文字とチェックボックスが結びついていれば、四角だけでなく、文字を押してもチェックを切り替えられます。スマートフォンで指を使うときにも、押せる場所が広い方が操作しやすくなります。
小さな四角ではなく、「利用規約に同意する」の文字を押してみてください。
① 文字との関連付けなし
チェックなし
② labelで文字と関連付け
チェックなし
①も四角自体を押せば切り替わります。②は文字も押せるので、押す場所を狙いやすくなります。練習用の見本で、実際の規約への同意や情報の送信は行いません。
そしてlabelには、もう一つ大切な役割があります。その欄に何を入力するのかを、画面の読み上げ機能にも伝えることです。
画面を見ていると、「お名前」という文字のすぐ下に入力欄があれば、名前を書く場所だと分かります。でも、文字を近くに置くだけでは、HTML上の結びつきまでは作られません。
スクリーンリーダーという、画面の情報を音声などで伝えるソフトを使う人にも、入力欄に移動したときに項目名が伝わるようにする。そのためにlabelを使います。W3Cのフォーム解説
「見れば分かる」を、見た目の位置関係だけに任せずに済むわけです。
基本は、forとidを同じにする
たとえば、お名前の入力欄なら、こう書きます。
<label for="your-name">お名前</label>
<input id="your-name" name="your-name" type="text">確認するのは、次の組み合わせです。
- labelの
for="your-name" - inputの
id="your-name"
この二つを一致させると、「お名前」という文字が、どの入力欄の説明なのか決まります。
ここで間違えやすいのが、name属性との区別です。
| 属性 | この例での役割 |
|---|---|
for | ラベルを結びつける相手のidを指定する |
id | ページ内の要素を識別する |
name | フォームの値を送るときの項目名になる |
上の例では同じ文字列にしていますが、labelのforが探している相手は、nameではなくidです。
入力欄をlabelで囲む書き方もあります。
<label>
お名前
<input name="your-name" type="text">
</label>この形なら、結びつけるためのforとidは省略できます。これから覚えるなら、まずはforとidを明示する書き方にすると、コードを読んだときにも対応する相手を追いやすいと思います。
効かないときは、文字の違いとidの使い回しを見る
forとidが、一文字でも違っていないか
次の例は、似ていますが一致していません。
<label for="user-name">お名前</label>
<input id="username" type="text">user-nameとusername。ハイフンが一つ違います。
user-nameとUser-nameのように、大文字と小文字が違う場合も別の値です。「だいたい同じ」では結びつきません。
見比べて分かりにくければ、片方の値をコピーしてもう片方に合わせると、入力し直すより間違いを減らせます。
コピーした入力欄に、同じidが残っていないか
住所欄をコピーして、お届け先の欄を作る。そんなときに気をつけたいのがidの重複です。
<label for="address">ご住所</label>
<input id="address" type="text">
<label for="address">お届け先</label>
<input id="address" type="text">これでは、どちらのラベルも同じaddressを指定しています。HTMLの規則では、この例のように同じidの入力欄が並ぶと、先に現れる方が関連付けの対象になります。HTML標準のlabelの定義
「お届け先」を押したのに、上の「ご住所」にカーソルが移る。そういう動きにつながります。
修正するときは、入力欄のidと、それに対応するforをセットで変えます。
<label for="home-address">ご住所</label>
<input id="home-address" type="text">
<label for="shipping-address">お届け先</label>
<input id="shipping-address" type="text">パソコン用とスマートフォン用のフォームを別々に作っている場合も、表示中のものだけでなく、同じページ内に重複がないか確認してください。
一致しているのに反応しない場合もある
forとidをそろえても動かないなら、指定している相手を見てみます。
<label for="email">メールアドレス</label>
<div id="email">
<input type="email">
</div>この例でidが付いているのは、入力欄を囲むdivです。labelは、その中のinputまで自動的に探して結びつけてくれるわけではありません。
idを入力欄へ移します。
<label for="email">メールアドレス</label>
<div>
<input id="email" type="email">
</div>一方、関連付けが正しくても、入力欄がdisabledで無効になっていたり、JavaScriptがクリック時の動作を止めていたりすると、期待した反応が出ないことがあります。
そのため、ラベルを押すのは手軽な動作確認ですが、反応しないだけで「forとidが間違っている」とは断定できません。
逆に、JavaScriptで入力欄へカーソルを移しているだけなら、クリックが動いてもlabelの関連付けがあるとは限りません。動きとHTMLの両方を見ることが大切です。
placeholderが消えても、何の欄か分かるか
入力欄の中に薄く表示する文字を、placeholderと呼びます。
<input type="text" placeholder="お名前">すっきり見えますが、入力すると「お名前」の文字は消えます。
たとえば、名前、フリガナ、会社名を続けて入力し、途中で別の作業をしたとします。戻ってきたときに項目名が残っていないと、何を書く欄だったか確認しにくくなります。
labelとplaceholderは、役割を分けると分かりやすくなります。
<label for="full-name">お名前</label>
<input
id="full-name"
name="full-name"
type="text"
placeholder="例：山田 太郎"
>labelには「何を書く欄か」。placeholderには、必要なら「どんな書き方をするか」の例を入れる。この形なら、入力を始めても項目名は残ります。必ず読んでほしい注意事項も、消える文字だけに任せず、欄の近くに表示しておきたいところです。
なお、aria-labelで読み上げ用の名前を付ける方法もあります。ただし、その文字は画面には表示されず、labelのように押せる範囲も広がりません。用途が見た目から分かる検索欄などで使う選択肢であり、表示できる項目名を一律に省くためのものではありません。W3Cのaria-labelの解説
最後に、入力する人のつもりで触ってみる
修正したら、コードを閉じてフォームを操作してみます。
「お名前」の文字を押すと、対応する欄にカーソルが入るか。チェックボックスは、横の説明文を押しても切り替えられるか。入力を始めたあとも、何の欄か分かるか。
チェックボックスなら、四角を押す場合と、文字を押す場合を比べてみてください。labelがあることで何が変わるのかを、自分の手で確かめられます。
見た目が整っていると、フォームは完成したように感じます。でも、実際に入力する人にとっては、押しやすさや迷わず書けることも大切です。
こうした細かい確認も、実務では必要になります。何が求められるかはコーダーが実務で重宝されるスキルはHTML/CSSだけではないに書きました。求人での呼ばれ方の違いはコーダーとマークアップエンジニアの違い｜仕事内容と求人の見分け方にまとめています。
まずは、自分のフォームの「お名前」という文字を一度押してみる。そこからなら、難しい準備なしに確認を始められます。
