<label>タグは、ラベルと呼ばれる項目名と、フォームの各部品を関連付けることで、使いやすくするためのタグです。今回は、HTML5における<label>タグの使い方をご紹介します。
HTML5における＜label＞タグの使い方
<label>要素はフォームの部品に使う要素ですが、直接フォームの部品になるものではないので必ず必要なものではありません。ですが、ユーザーにとって大変親切な要素なので、フォームを作成する場合は知っておいたほうが良い要素です。
|
1 |
名前：<input name="name" id="username"> |
例えば上記のような項目名と、部品があったとします。その場合は、以下のように<label>要素で項目名を囲み、更にfor属性で、関連付けたいinputのid名を指定し呼び出すことで関連付けます。
|
1 |
<label for="username">名前：</label><input name="name" id="username"> |
こうすることで、項目名の、サンプルでいうと「名前」の箇所をクリックするだけで、inputの入力領域に入力が出来るようになります。
更に簡単な方法で、項目名と部品を<label>で囲んでしまう方法もあります。古いブラウザは対応していない場合があるようですが、こちらの場合はfor属性などを使用する必要がないので便利です。
|
1 |
<label>名前：<input name="name"></label> |
その場合は上記のようになります。他で使用しなければinput自体のid属性の指定も必要ありません。
