HTMLで入力フォームを作った際、ラベルを表示する方法がわからない人はいませんか？
今回は、フォームにラベルを表示するために使用する、labelタグの使い方について紹介します。フォームを扱うサイトでは必須ともいえるlabelタグ、この機会にぜひ理解しておきましょう。
目次
HTMLの入力フォームにラベルを表示させる方法
Webページに、HTMLで入力フォームを作る場合、フォームの横に「名前」「住所」「性別」など、ラベルを表示させるのが一般的です。その時に便利なのが、labelタグです。
ラベルのない入力フォームでは、何を入力すればいいのかわかりません。そのため、フォーム作成においてlabelタグは、絶対に必要なタグの1つです。
HTMLのlabel（ラベル）タグの使い方
HTMLのlabelタグを使う方法について解説していきます。まず、labelタグには次の2通りの使い方があります。
- labelタグのfor属性とフォームのid属性を関連付ける方法
- labelタグ内にフォームとテキストを含める方法
どちらも使われている方法なので、優劣をつけにくいですが、「labelタグのfor属性とフォームのid属性を関連付ける方法」の方が対応している実行環境が多いので、こちらを使うのがおすすめです。
それでは、2通りのlabelタグの使い方について、詳しくみていきましょう。
labelタグのfor属性とフォームのid属性を関連付ける
HTMLの入力フォームで、labelタグのfor属性とフォームのid属性を関連付けてラベルを表示させる場合、次のように記述します。
See the Pen
eYzPpWj by sho-go (@sho-go)
on CodePen.
labelタグのfor属性とフォームのid属性を関連付けているため、ラベルの「お名前」をクリックすると、入力欄がアクティブになります。
labelタグ内にフォームとテキストを含める
HTMLの入力フォームで、labelタグ内にフォームとテキストを含めてラベルを表示させる場合、次のように記述します。
See the Pen
dyXgYRb by sho-go (@sho-go)
on CodePen.
こちらも、labelタグ内にフォームとテキストを含めて表示させているため、ラベルの「お名前」をクリックすると、入力欄がアクティブになります。
ただし、ブラウザが「Internet Explorer 6」の場合は、for属性を使った書き方にしか対応していないので、注意が必要です。
HTMLのlabel（ラベル）タグの注意点
HTMLでlabelタグを使用する場合には、注意するべき点があります。代表的なものを紹介するので、ラベルを表示させる場合には、気を付けるようにしましょう。
- labelタグにボタンやリンクを含めない
- labelタグに見出しタグを含めない
- labelタグを入れ子にしない
上記の3つが、ラベル表示をする際によくあるミスです。それでは、各注意点について詳しく解説していきますね。
labelタグにボタンやリンクを含めない
labelタグの中には、ボタン（buttonタグ）やリンク（aタグ）を含めないようにしましょう。
通常、ラベルをクリックすると入力欄がアクティブになります。しかし、ラベルがボタンやリンクの場合、クリックするとページ遷移や画面の変化が起きてしまいます。
labelタグに見出しタグを含めない
labelタグの中には、見出しタグも含めないようにしましょう。
見出しタグは、文章のまとまりのタイトルとして認識されます。そのため、入力フォームの説明を意味するlabelタグと混在してしまうと、各タグの役割が不明瞭になってしまいます。その結果、一部の読み上げソフトなどでは、正しく認識されない場合があります。
labelタグを入れ子にしない
labelタグの中にlabelタグを含めるような、入れ子構造にならないようにしましょう。
そもそも、labelタグは入力欄の説明を意味するタグなので、入れ子構造になっている場合、使い方を間違っていると思って良いでしょう。
まとめ
HTMLのフォームに、ラベルを表示させるlabelタグについて解説してきました。サイトに入力フォームを設置する場合、必ずといっていいほど使うタグなので、紹介した使い方をしっかりと理解しておきましょう。
また、ユーザビリティの高いサイト運営を行うために、labelタグを使うときの注意点をしっかりと守って、記述するようにしましょう。
