label の働き

お名前 <input type="text" name="name" id="name" size="20" />

このような場合，コントロール本体であるテキストボックス<input type="text" ... />とその説明である「お名前」というテキストは，隣同士に並んではいるけれど，対応していることがはっきりマークアップされているわけではありません。

label要素を使って，次のようにマークアップすることで，「お名前」というテキストとテキストボックスをはっきり関連づけることができます。label要素内のテキストが，for属性の値に入れられた id名を持つ要素，つまり id="name" のラベルであることを示すわけです。

<label for="name">お名前</label> <input type="text" name="name" id="name" size="20" />

IE6以前では対応していませんが，次のようにテキストとコントロールをまとめてくくる方法もあります。

<label>お名前 <input type="text" name="name" id="name" size="20" /></label>

label要素の部分をクリックすると，テキストボックス（input type="text"）やテキストエリア（textarea）ならボックスにカーソルが入った状態，ラジオボタン（input type="radio"）やチェックボックス（input type="checkbox"）だと選択された状態，さらにクリックすると選択を解除した状態になります。

大きさの限られたラジオボタンやチェックボックスの場合，テキスト部分も含めてクリックが有効になるので，かなり使いやすくなります。

CSSでのデザインにも便利

ラジオボタンやチェックボックスをいつか並べるようなことがあります。

<form method="post" action="#">
  <dl>
    ......
    <dt>利用しているソーシャルブックマーク</dt>
    <dd class="sbm">
      <label><input type="checkbox" name="hatena" id="hatena" value="はてなブックマーク" />はてなブックマーク</label>
      <label><input type="checkbox" name="delicious" id="delicious" value="del.icio.us" />del.icio.us</label>
      <label><input type="checkbox" name="livedoor" id="livedoor" value="livedoorクリップ" />livedoorクリップ</label>
      <label><input type="checkbox" name="buzzurl" id="buzzurl" value="buzzurl" />buzzurl</label>
      <label><input type="checkbox" name="yahoo" id="yahoo" value="Yahooブックマーク" />Yahooブックマーク</label>
      <label><input type="checkbox" name="pookmark" id="pookmark" value="POOKMARK Airline" />POOKMARK Airline</label>
      <label><input type="checkbox" name="nifty" id="nifty" value="@niftyクリップ" />@niftyクリップ</label>
      <label><input type="checkbox" name="newsing" id="newsing" value="newsing" />newsing</label>
      <label><input type="checkbox" name="others" id="others" value="その他" />その他</label>
    </dd>
    ......
  </dl>
</form>

このように マークアップしておくと，CSSでのデザインも楽になります。（ただし，このマークアップではIE6以前で label要素上のクリックは効きません）

form dl dd.sbm label {
  margin-right: 1.5em;
  white-space: nowrap;
}

とすれば，テキストとコントロールのセットが分かりやすくなり，途中で折り返されることがなくなります。

ひとつずつ改行したくなったら，<br /> を入れなくても，次のようにすれば解決します。

form dl dd.sbm label {
  display: block;
}

応用としてこんなふうにも。

form dl {
  overflow: hidden;
  width: 434px;
}

form dl dd.sbm label {
  display: block;
  float: left;
  width: 13em;
}

注意点

• ひとつの label に対して，ひとつのコントロールを対応させなければなりません。label要素の中に複数のチェックボックスを入れるようなことはできません。
• label要素はインライン要素です。
• せっかく関連づけがされているので，label要素にマウスがのったとき，見た目上の変化があるとよいかもしれません。IEでは，コントロール本体がグローしますが，他のブラウザでは特に変化はありません。たとえば次のように。

  form dl dd.sbm label:hover {
    background: #EEE;
  }

参考

• label要素とその挙動 | Web標準Blog | ミツエーリンクス
• フォームとアクセシビリティ -- ごく簡単なHTMLの説明 -- The Web KANZAKI