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

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

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

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

名前:<input name="name" id="username">

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

<label for="username">名前:</label><input name="name" id="username">

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

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

<label>名前:<input name="name"></label>

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


イベント

2017/12/05(火)
Design Thinking Square