HTML5における<label>タグの使い方

<label>タグは、ラベルと呼ばれる項目名と、フォームの各部品を関連付けることで、使いやすくするためのタグです。今回は、HTML5における<label>タグの使い方をご紹介します。

HTML5における<label>タグの使い方

<label>要素はフォームの部品に使う要素ですが、直接フォームの部品になるものではないので必ず必要なものではありません。ですが、ユーザーにとって大変親切な要素なので、フォームを作成する場合は知っておいたほうが良い要素です。

例えば上記のような項目名と、部品があったとします。その場合は、以下のように<label>要素で項目名を囲み、更にfor属性で、関連付けたいinputのid名を指定し呼び出すことで関連付けます。

こうすることで、項目名の、サンプルでいうと「名前」の箇所をクリックするだけで、inputの入力領域に入力が出来るようになります。

更に簡単な方法で、項目名と部品を<label>で囲んでしまう方法もあります。古いブラウザは対応していない場合があるようですが、こちらの場合はfor属性などを使用する必要がないので便利です。

その場合は上記のようになります。他で使用しなければinput自体のid属性の指定も必要ありません。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集

購読

平日・毎朝更新中