ばけらの HTML リファレンス(未完成)

共通属性 …… %coreattrs;, %i18n;, %events;

labelの解説

label要素を使うと、文字列をコントロールに関連づけることができます。

押しボタンなどは value属性の値がラベルとしてボタン表面に表示されますが、文字入力欄などはラベルを持ちません。特に非視覚系の環境では、その入力欄が何を意味するのか判別するのは困難です。そのような場合、label要素でラベルとなる文字列をコントロールと関連づけておけば、コントロールが何なのかを判別する助けになります。

また、視覚系のブラウザを使っている場合でも、小さなラジオボタンやチェックボックスを正確にポイントしてクリックするのはなかなか骨の折れる作業です。ラベルが付いていると、ラベルをクリックするだけで選択できるようになりますので、クリックするのが非常に楽になります。

ラベルとコントロールを関連づける方法は二通りあります。

一つは for属性を使う方法です。コントロールにあらかじめ id属性を指定しておき、対応する labelの for属性にその ID を指定します。たとえば以下のようにします。

もう一つは、一つの label要素 の中にラベルとコントロールを入れてしまう方法です。その時、label要素内には一つのコントロールしか入れられません。そのコントロールと、label要素内のテキストとが関連づけられます。

なぜか MSIE は前者にしか対応していなかったりしますので、前者の方がお勧めです。

label要素には accesskey属性を指定することができます。これによってフォーカスを受け取ったラベルは、対応するコントロールにフォーカスを渡します。

※……ということになっているのですが、Mac IE などではラベル自体が単独でフォーカスを持ってしまったりしてうまく動作しなかったりします。これはバグ以外のなにものでもないのですが、非常に残念な感じです。