HTML
Googleでログイン
label要素とは
labelとは、formのなかでフォームの項目名とテキスト入力欄、ラジオボタンといった構成部品を紐づけるために用意されたHTMLのタグ・要素です。
関連付けを行なうことにより、ブラウザでラベルをクリックした際にその構成部品をクリックしたのと同じ動作ができるようになります。
labelを使って紐づけを行なうには2つの方法があり、for属性とid属性を使った指定方法と、label要素内に部品とlabelを指定する方法があります。
一般的にはfor属性とid属性を使った方法が用いられています。
HTMLの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。
問題15：label要素を使って項目と入力欄を紐づけよう
labelを使って項目と入力欄を紐づけましょう。
項目名をクリックして入力待ちの状態(アクティブ)になっていればOKです。
項目名をクリックして入力待ちの状態(アクティブ)になっていればOKです。
あらかじめエディタに書くコード
<form>
<dl>
<dt>お名前</dt>
<dd><input type="text"></dd>
</dl>
</form>
¥HTML¥
期待する画面
解答ソースコード
<form>
<dl>
<dt><label for="your-name">お名前</label></dt>
<dd><input type="text" id="your-name"></dd>
</dl>
</form>
¥HTML¥
補足
実はシンプルにinputタグをlabel要素で囲うだけでも紐づけが可能です。
しかし、この方法だとlabelタグ内でしか紐づけを行なうことができません。
今回使用したlabelのfor属性とid属性を使って紐づけを行なうことで、
お互いが別の場所にあっても紐づけることができます。
Webページの一番上と一番下にある要素を紐づけることも可能という事です。
基本的には今回のような紐づけ方で覚えておくといいです。
しかし、この方法だとlabelタグ内でしか紐づけを行なうことができません。
今回使用したlabelのfor属性とid属性を使って紐づけを行なうことで、
お互いが別の場所にあっても紐づけることができます。
Webページの一番上と一番下にある要素を紐づけることも可能という事です。
基本的には今回のような紐づけ方で覚えておくといいです。
#忍者CODE無料問題集で活動を記録しよう
完了にする！
dtにlabelを使った項目名を書き、ddにフォーム部品を定義します。
labelタグで紐づけを行なうにはまず項目名を定義するdtタグのテキストを囲うようにlabelタグを書きます。
次に項目とフォームを識別するためのfor属性とid属性を書いていきます。
labelのfor属性と入力欄のid属性を同じ値にすることで、
項目名と入力欄を紐づけることができます。
今回は名前を送信するフォームなのでyour-nameと命名していますが
同じような意味合いであれば何でもOKです。