labelタグの必要性

2010年09月12日UP
  • このエントリーをはてなブックマークに追加

今日は<label>タグの必要性と使い方について話したいと思います。

labelタグは、フォーム制作時にユーザビリティを考える(ということはEFOを考える)上では必須のタグですので、フォーム制作時には必ず記述するようにしましょう。

また、フォームに訪れたユーザーの満足度を向上させる効果もあります。

type="text"の例

まずは使用した場合とそうでない場合の入力欄を御覧ください。

●<label>使用なし

お名前

●<label>使用あり

見た目ではわからないので、項目名(ここでは「お名前」の部分)をクリックしてみてください。

これでおわかりいただけると思いますが、項目名をクリックすることでinput内をフォーカスさせることができます。これがlavelの役割です。

そしてlavelを使用した上記例の記述は以下になります。

label記述 HTMLタグ

  1. <label for="onamae">お名前</label>
  2. <input type="text" id="onamae" name="" />

label for と input id を認識し、どの入力欄にフォーカスさせるかを判別しています。
(ここはどのような文字列でも同じでしたら機能します。)

『onamaeのlavelが付いている場所をクリックすると、id="onamae"にフォーカスする』
このような覚えておくとすぐに思い出せると思います。

type="radio"の例

大半のユーザーは直接入力欄をクリックしますので、上記のような input type が "text" でしたら、送信率にはさほど影響することはありません。

ですが、 type "radio" や "checkbox" の場合は送信率にも影響してきます。

その理由は使用例を見ていただければ一目瞭然です。

●type=radio label使用なし

性別 男性
女性

●type=radio label使用あり

性別

labelを使用することによりマークさせるポイントが大幅に広がりますので、もしちょっとズレた場合にもユーザーに余計なストレスを与えずに済みます。

さらに少し改造して、クリックポイントのポインタの形を変えたり、どこにチェックを付けるのかわかりやすくするためチェック項目を枠線でくくったりしますと、更なるストレス軽減に繋がります。

●type=radio label使用あり 改造版

性別

type="radio" label記述 HTMLタグ

  1. 性別
  2. <p style="border: 1px solid #ccc; padding: 2px 10px;">
  3. <input id="3-1" name="3-1" type="radio" />
  4. <label for="3-1" style="cursor: pointer;"> 男性</label>
  5. </p>
  6. <p style="border: 1px solid #ccc; padding: 2px 10px;">
  7. <input id="3-2" name="3-1" type="radio" />
  8. <label for="3-1" style="cursor: pointer;"> 女性</label>
  9. </p>

※ 改造版のソースコードです。

type=text との違いで注意するところは、全体的な項目名(ここでは「性別」)を<label>で囲むのではなく、チェック項目(ここでは「男性」と「女性」)を<label>で囲むということです。

項目名にlabelを指定してしまうと、性別をクリックすると男性または女性にチェックが入ってしまうことになりますので、チェックが自分とは違う箇所についてしまっては逆にストレスになってしまいます。


余談ですが、<a>タグ、つまりリンクを作るタグも、数文字を指定するのではなく、“範囲”で指定したほうがクリックポイントが広くなりクリックしやすくなるという効果もあります。

クリックポイントはフォームでなくてもWEBサイトでしたら重要な点になりますので、ユーザーの事を考え設定するようにしましょう。

では、今日もお読みいただきましてありがとうございました!

タグ: | |