HTML

【図解付き】HTMLのlabelとinputの連携方法【2種類】

どうも、つよぽんです!

今回はHTMLのlabelタグの使い方とlabelタグとinputタグをの連携方法について解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • HTMLのlabelタグの知らない方
  • HTMLのlabelタグを知っているけど使い方がいまいちわからない方
  • HTMLのlabelタグとinputタグの2種類の連携方法を知らない方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
HTMLのlabelタグの使い方を覚えるHTMLのlabelタグを使うことでinputタグなどのユーザーによって入力される情報のキャプション(テキスト)を付けることができます。またキャプションをクリックすることで入力フォームなどにフォーカスがあたりユーザービリティが向上します。...

また、今回解説するlabelタグはinputタグと組み合わせて使うので、inputタグの使い方について知りたい方は以下の記事を参照していただけたらと思います。

あわせて読みたい
HTMLのinputタグで出来ることを知る【図解付き】HTMLのinputを使うことでユーザーに「ユーザー名」「パスワード」などの情報を入力してもらうことができます。またtype属性によって様々な機能に切り替わるので、inputを使うことでどんなことが出来るのか解説していきます。...

今回の内容は以下のとおりです。

今回の内容
  • labelタグの役割を知る
  • labelタグとinputタグの2種類の連携方法を学ぶ

 

labelタグの役割を知る

HTMLのlabelタグには大きく分けて2つの役割があります。

labelタグの役割
  1. 入力フォームの意味を明確にする
  2. labelタグとinputタグを連携させて、ラベルテキストにクリックしても入力フォームにフォーカスがあたるようにする
labelタグとinputタグを組み合わせているサンプルlabelタグとinputタグを組み合わせているサンプル

上の画像のコードが読みづらい場合は、以下のリンク先からも確認できます。

上の画像ではlabelタグの中にinputタグを埋め込んでいる。

そして、labelタグの中で、inputタグの外側に「名前」というテキストがあるのがわかるかと思います。

ここでは、このinputタグには「名前」を入力するという意味がユーザーに伝わります。また、ユーザーに伝わるだけでなくセマンティック(※)なコーディングにもなります。

※セマンティック

セマンティックなコーディングとは一言で言うと、「構造的に正しく意味をもたせたコーディング」です。

今回はlabelタグを使って説明していますが、pタグやdivタグなどを使っても表示上同じように見せることは出来ます。

しかし、pタグは「段落タグ」、divタグは「グルーピングするための汎用タグ」という立ち位置になり、フォームの意味を表すテキストとしては意味が合いません。

MDNのlabelタグのドキュメントを読むと次のように書かれていて、フォームの意味を表すテキストとして意味が合います。(キャプションの立ち位置になるため。)

「HTML の <label> 要素は、ユーザーインターフェイスの項目のキャプションを表します。」

他にもセマンティックなコーディングは、アクセシビリティ(どんな人でも使いやすい状態)に優れているコーディングになるため、目の不自由な方にとっても優しいWebページを作ることにもなります。

以下にセマンティックで参考になりそうな記事をいくつか挙げておきます。

で説明した「labelタグとinputタグを連携させて、ラベルテキストにクリックしても入力フォームにフォーカスがあたるようにする」は次の章で解説していきます。

labelタグとinputタグの2種類の連携方法を学ぶ

前の章では、labelタグはinputタグで入力する項目の意味を伝えるだけでなく、セマンティックなコーディングにもなるということを説明しました。

この章では実際に、labelタグinputタグをどのようにして連携させるかについて画像を使って解説していきます。

連携方法を解説する前に、そもそもlabelタグとinputタグを連携させることで得られるメリット(機能)とはなんでしょうか?

それは、labelタグ内で書いたラベルテキストをクリックしても、入力フォームにフォーカスが当たるようになることです。

ラベルあり・なしを比較したサンプルラベルあり・なしを比較したサンプル

上のアニメーション画像は、labelタグとinputタグを連携させた入力フォーム(「名前(ラベルあり)」と書かれたほう)と、連携させていない入力フォーム(「名前(ラベルなし)」と書かれたほう)の挙動を比較したものになります。

名前(ラベルあり)」の方はラベルテキストをクリックしたときに、すぐ右の入力フォームにフォーカスが当たるようになっているのがわかるかと思います。

それに対して「名前(ラベルなし)」の方は、ラベルテキストをクリックしても、すぐ右のフォームにフォーカスが当たりません。

これがlabelタグとinputタグをを連携した時と、していない時の挙動の違いになります。

それでは次に、実際にlabelタグとinputタグを連携させる方法を見ていきましょう。

labelタグとinputタグを連消させる方法は2種類あります。

2種類の連携方法
  1. labelタグの中にinputタグを入れる
  2. labelタグとinputタグは分離して、labelタグのfor属性とinputタグのid属性値を一致させる

labelタグの中にinputタグを入れる

labelタグの中に直接inputタグを埋め込むlabelタグの中に直接inputタグを埋め込む

上の画像のコードが読みづらい場合は、以下のリンク先からも確認できます。

上の画像の赤枠内を見ていただくと、labelタグの中にinputタグがあるのがわかるかと思います。

labelタグの中にinputタグを埋め込むことによって、そのlabelタグとinputタグは直接つながっているのがブラウザ側でも判断できるので、次に説明するlabelタグのfor属性とinputタグのid属性を使わなくても連携させることが出来るのです。

それでは、labelタグのfor属性inputタグのid属性を使った連携方法も見ていきましょう。

labelタグのfor属性とinputタグのid属性の値を一致させる

labelタグのfor属性とinputタグのid属性で連携する方法labelタグのfor属性とinputタグのid属性で連携する方法

上の画像のコードが読みづらい場合は、以下のリンク先からも確認できます。

こちらはさきほど紹介したlabelタグの中にinputタグを入れる方法とは異なり、labelタグとinputタグはそれぞれ独立しています。

独立したlabelタグとinputタグを連携させるにはlabelタグのfor属性inputタグのid属性値を一致させることで可能となります。

上の画像の赤枠内を見てみると、labelタグのfor属性inputタグのid属性の値が「username」という値で一致しているのがわかります。

値を一致させることで、labelタグの中にinputタグを埋め込んだときと同じように、ラベルテキストをクリックしても入力フォームにフォーカスが当たるようになるのです。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • labelタグを使ってinputタグに意味をもたせて、セマンティックなコーディングが出来る
  • labelタグとinputタグを連携させることでラベルテキストをクリックしても入力フォームにフォーカスが当たる
  • labelタグとinputタグを連携させる方法は2種類ある
    1. labelタグの中にinputタグを埋め込む方法
    2. labelタグのfor属性とinputタグのid属性の値を一致させる方法

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLのlabelタグの使い方を覚えるHTMLのlabelタグを使うことでinputタグなどのユーザーによって入力される情報のキャプション(テキスト)を付けることができます。またキャプションをクリックすることで入力フォームなどにフォーカスがあたりユーザービリティが向上します。...

今回の記事で利用した画像はスライドから抜粋したものです。この記事では静止画となっている画像もスライドではアニメーションがついているので理解がより深められるかと思います。

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です