labelタグとは?|フォーム部品とラベルを関連付ける

labelタグとは?|フォーム部品とラベルを関連付ける
博士
今回は、フォームをより使いやすくする<label>タグについて解説するぞ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<label>タグとは

 

<label>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素(再関連付け可能要素 HTML5のみ) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが期待される場所
内容 フレージング・コンテンツ(ただし、ラベルの対象となっていないラベル付け可能要素を入れることは不可 / label要素の入れ子は不可)


 
 
<label>タグは、フォーム部品にラベル(項目名)を付ける際に使用します。

<label>タグを使用することで、フォーム部品とラベルを関連付けることができます。
例えばチェックボックスの場合は、ラベルであるテキスト部分をクリックしても、チェックできるようになるなどです。
 
 

リンゴ
選択できる範囲が広くなるので、ユーザーにとっても使いやすくなりますね!
 
 

関連付けの方法

フォーム部品とラベルの関連付けは、以下の2つの方法で設定することができます。

  • label要素の中にフォーム部品とラベルを配置する  
     
    博士
    label要素の中には部品を1つだけ配置できるぞ。
  •  
     

  • for属性を使用する

    関連付けたいフォーム部品にid属性を指定し、label要素のfor属性にそのID名を記述します。

 
 

スポンサーリンク

for属性

for属性を使用する場合、label要素の中にはラベルとなるテキストのみを記述します。
関連付けたいフォーム部品にid属性を指定し、この値をfor属性の値に指定すれば、ラベルと部品が連動するようになります。

 
 

ラベル付け可能なフォーム関連要素

ラベル付けの対象にできるのは以下の要素です。

 
 

スポンサーリンク

使用例

 
 

表示例

メールマガジンの購読:

 
 

まとめ

フォーム部品にラベルを付ける際は、<label>タグを使用します。
 
 

博士
2種類の関連付け方法を使い分けよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








labelタグとは?|フォーム部品とラベルを関連付ける