<LABEL>フォーム部品にラベルを付ける

<LABEL>では、<FORM>を構成する入力・選択項目などのさまざまな部品と、そのラベルテキスト(項目名)を関連付け一体化させることができます。

例えば、入力フィールド(項目)チェックボックスラジオボタン、メニューなどvalue属性によってラベルを付けられない部品にラベルをつけ、その部品とテキスト部分を一体化させたい時などに使用されます。

これによってラベルであるテキスト部分をクリックしても反応して、チェックを付けられるようになります。

設定方法は2通りあり、1つは<LABEL>タグのみを利用する方法、そしてfor属性を利用する方法とがあります。 <LABEL>タグのみを使用する方法の場合は、ラベルとなるテキストと入力・選択項目の両方(関連付けたい部品)を<LABEL>~</LABEL>内に記述します。

for属性を使用する場合は、<LABEL for="">内にラベルとして表示したいテキストのみを記述します。 そして一体化させたい(関連付けたい)部品にid属性を設定し、テキストを記述した<LABEL>のfor属性に、そのidと同じ値を指定する事で関連付けます。 この場合ラベルと関連付けたい部品とが1対1となるようにして下さい。

なおこれらの指定方法に完全に対応してないブラウザもあります。 例えば、Internet Explorer6以前のものは、for属性を利用する方法にしか対応してませんので、ご注意ください。

使用した時の例

<p>メルマガの購読<br />
<label for="nm">名前:</label>
<input type="text" name="name" id="nm">
</p>
<p>
<label><input type="radio" name="q" value="yes">希望する</label>
<label><input type="radio" name="q" value="no">希望しない</label>
</p>

ブラウザ上の表示例

メルマガの購読

書式

  • <label for="参照id">~</label> ・・・・・・ 項目とラベルテキストを一体化

属性

for="" ラベルを付ける対象のid属性の値を指定

対応ブラウザなどのデータ

形式 <label>~</label> 分類 インライン要素
親要素 子要素にフレージングコンテンツを含める要素 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
カテゴリ フローコンテンツ / フレージングコンテンツ / パルパブルコンテンツ / リアソシエイタブル / インタラクティブコンテンツ / フォーム関連
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~