問題

15
HTML

label要素を使って項目と入力欄を紐づけよう

この問題では、項目とフォーム部品を紐づける役割を持つlabel要素について学習していきます。 labelタグは、少し複雑なハンバーガーメニューの実装などでも使用されるHTMLのタグです。 label要素を使って要素を紐づける方法をきっちり覚えていきましょう。

ポイント

label要素とは

labelとは、formのなかでフォームの項目名とテキスト入力欄、ラジオボタンといった構成部品を紐づけるために用意されたHTMLのタグ・要素です。
関連付けを行なうことにより、ブラウザでラベルをクリックした際にその構成部品をクリックしたのと同じ動作ができるようになります。

labelを使って紐づけを行なうには2つの方法があり、for属性とid属性を使った指定方法と、label要素内に部品とlabelを指定する方法があります。
一般的にはfor属性とid属性を使った方法が用いられています。

HTMLの問題に挑戦しよう!

問題

label要素を使って項目と入力欄を紐づけよう

labelを使って項目と入力欄を紐づけましょう。

項目名をクリックして入力待ちの状態(アクティブ)になっていればOKです。

あらかじめエディタに書くコード

                    <form>
  <dl>
    <dt>お名前</dt>
    <dd><input type="text"></dd>
  </dl>
</form>
¥HTML¥
                

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

dl・dt・ddタグを使った説明リスト形式で作成していきます。
dtにlabelを使った項目名を書き、ddにフォーム部品を定義します。
labelタグで紐づけを行なうにはまず項目名を定義するdtタグのテキストを囲うようにlabelタグを書きます。

次に項目とフォームを識別するためのfor属性とid属性を書いていきます。
labelのfor属性と入力欄のid属性を同じ値にすることで、
項目名と入力欄を紐づけることができます。

今回は名前を送信するフォームなのでyour-nameと命名していますが
同じような意味合いであれば何でもOKです。

補足

実はシンプルにinputタグをlabel要素で囲うだけでも紐づけが可能です。
しかし、この方法だとlabelタグ内でしか紐づけを行なうことができません。

今回使用したlabelのfor属性とid属性を使って紐づけを行なうことで、
お互いが別の場所にあっても紐づけることができます。
Webページの一番上と一番下にある要素を紐づけることも可能という事です。

基本的には今回のような紐づけ方で覚えておくといいです。

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET