inputとlabelを紐づけるのってどうやるの？
そんな疑問にお答えします。
HTMLのlabelタグにはinputなどの入力欄に対して、何を入力する欄なのかがわかるようにその意味や説明を書きます。
そしてlabelタグを使えば項目名と入力欄を連動させることができます。
下図をみてください。
labelなし :
「labelなし」は入力欄をクリックしないと選択状態にはなりませんが、「labelあり」はそのテキスト自体をクリックしても選択状態になるのがわかります。
このようにlabelタグを使うことによって項目名と入力欄を連動させることができます。
そのためにはinputとlabelの紐づけが必要になります。
この記事ではその紐づけ方法を紹介します。
２つの紐づけ方法
紐づける方法は２つあります。
「label for」と「input id」で紐づけ
<label for="hoge">お名前：</label>
<input id="hoge" type="text" name="your_name">項目名を「label」で囲みます。
labelには「for=”△△”」、inputには「id=”△△”」と同じ名前を書きます。
これで紐付け完了です。
labelの中にinputを入れて紐づけ
<label>お名前：<input type="text" name="your_name"></label>「input」を「label」で囲みます。
ここではテキストなどの項目名も入力欄もすべてlabelの中に入れます。
これで紐付け完了です。
２つの違い
ここで疑問として「２つの紐づけ方法に何か違いがあるのか？」「どちらを使うべきなのか？」というのがあると思います。
しかし基本的には違いはありません。
両者ともラベルとその対象要素とを紐づける方法としては正しいです。
ただし、それぞれには利点、欠点がありますのでどちらを使うべきなのかはケースバイケースです。
「label for」と「input id」で紐づける場合の利点・欠点
- 「for属性」を使うことによって複数箇所にlabel要素を記述することができる（利点）
- label要素を複数記述した場合、どこに何個あるのかがわかりにくい（欠点）
- 記述量が増える（欠点）
labelの中にinputを入れて紐づける場合の利点・欠点
- label要素と対象要素の紐づけがひと目でわかる（利点）
- 「id属性」を使う必要がない。記述量が減る。（利点）
- 対象要素と紐づけたlabel要素を複数箇所に記述することができない（欠点）
それぞれの特性を踏まえた上でどちらの方法を使うのか選ぶといいと思います。
以上です。
投稿者 トシ
コメントを残す