問題
15label要素を使って項目と入力欄を紐づけよう
この問題では、項目とフォーム部品を紐づける役割を持つlabel要素について学習していきます。 labelタグは、少し複雑なハンバーガーメニューの実装などでも使用されるHTMLのタグです。 label要素を使って要素を紐づける方法をきっちり覚えていきましょう。
HTMLの問題に挑戦しよう！
問題
「label要素を使って項目と入力欄を紐づけよう」
labelを使って項目と入力欄を紐づけましょう。
項目名をクリックして入力待ちの状態(アクティブ)になっていればOKです。
あらかじめエディタに書くコード
<form>
<dl>
<dt>お名前</dt>
<dd><input type="text"></dd>
</dl>
</form>
¥HTML¥
期待する画面
解答と解説（label要素を使って項目と入力欄を紐づけよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用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ページの一番上と一番下にある要素を紐づけることも可能という事です。
基本的には今回のような紐づけ方で覚えておくといいです。
ポイント
label要素とは
labelとは、formのなかでフォームの項目名とテキスト入力欄、ラジオボタンといった構成部品を紐づけるために用意されたHTMLのタグ・要素です。
関連付けを行なうことにより、ブラウザでラベルをクリックした際にその構成部品をクリックしたのと同じ動作ができるようになります。
labelを使って紐づけを行なうには2つの方法があり、for属性とid属性を使った指定方法と、label要素内に部品とlabelを指定する方法があります。
一般的にはfor属性とid属性を使った方法が用いられています。
