≪ 目次　＜ 名前順要素一覧　［ 戻る ］　使用例 ↓　FORM要素を使用した使用例 ＞

バナー

中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

LABEL要素 - ラベル（項目）

form field LABEL text
label要素は、FORM要素内の
  • 他のフォーム部品要素の id属性値（識別名）と for属性値で関連付けた要素

又は、

  • 自要素の内容に記述したフォームコントロール部品要素（ for属性省略時 ）

にラベル（項目）を付け、何の入力かを明示するフォームコントロール部品要素。

  • label要素を選択すると関連付けされたフォーム部品要素が選択されます。
  • 要素の内容は、０個以上の LABE要素 を除くインライン要素ですが、
    <label></label>
    では意味がありません。１個以上のインライン要素が必要です。

W3C → XHTML 1.0 → Multi-part XHTML file → DTDs → XHTML-1.0-Strict より

<!--
  Each label must not contain more than ONE field
  Label elements shouldn't be nested.
-->
<!ELEMENT label %Inline;>
<!ATTLIST label
  %attrs;
  for         IDREF          #IMPLIED
  accesskey   %Character;    #IMPLIED
  onfocus     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED  >

for属性

for         IDREF          #IMPLIED

他のフォーム部品要素の ID名 と for属性値で関連付します。省略可。

accesskey属性

accesskey   %Character;    #IMPLIED

キーボードショートカットの為の文字を１文字指定します。関連付けされた要素で指定出来る場合は、その要素で指定する方が良いと思います。省略可。

onfocus属性

onfocus     %Script;       #IMPLIED

要素が選択された時に開始するスクリプト名を記述します。省略可。

onblur属性

onblur      %Script;       #IMPLIED

要素の選択が外れた時に開始するスクリプト名を記述します。省略可。

使用例

　XXXX　　はHTMLサンプルです。

　XXXX　　はHTMLサンプルの表示例です。

HTML記述
<p>
<input type="radio" name="果物" value="葡萄" id="rei1" tabindex="1" />
<label accesskey="m" for="rei1">葡萄（G）</label>
</p>
<p>
<input type="radio" name="果物" value="林檎" id="rei2" tabindex="1" />
<label accesskey="w" for="rei2">林檎（A）</label>
</p>
<p>
<input type="radio" name="果物" value="其の他" id="rei3" tabindex="1" checked="checked" />
<label accesskey="j" for="rei3">其の他（J）</label>
</p>
表示例

 表示例では、ラジオボタンでも、ラベル部でも選択ができます。
キーボードショートカットでも選択ができます。
HTML記述
<p>input type="radio" name="性別" value="男性" id="rei4" tabindex="2" /></p>
<p>input type="radio" name="性別" value="女性" id="rei5" tabindex="2" /></p>
<p>input type="radio" name="性別" value="?" id="rei6" tabindex="2" checked="checked" /></p>
<p>label accesskey="w" for="rei5">女性(W)</label></p>
<p>label accesskey="?" for="rei6">？(?)</label></p>
<p>label accesskey="m" for="rei4">男性(M)</label></p>
表示例

左の表示例では、ラジオボタン と ラベル部、どちらをクリックしても選択できますが、何を選択しているのか判りません。

要素は、スタイルシートを使用して、表示位置を如何様にも変える事ができます。表示例を見て判るように、ラジオボタンとラベルの位置は無関係になっていますが、id属性と for属性で関連付けしていますので、お互いに連動して反応します。

しかし、この様なレイアウトでは、閲覧者が混乱してしまいます。ページレイアウトは論理的に行う事も必要です。

HTML記述
<p>
<label accesskey="l">
左(L)
<input type="radio" name="position" value="L" tabindex="2" checked="checked" />
</label>
そして
<input type="radio" name="position" value="R" tabindex="2" accesskey="r" />
右(R)
</p>
表示例
そして 右（R）

左のラジオボタンは、label要素で 『 左（L） 』 とラベル付けされています。

右のラジオボタンは、視覚的に 『 右（R） 』 と関連付けされているだけで、input要素と 『 右（R） 』 の関連はありません。

視覚系ブラウザ以外では、、『 そして 』 と 『 右（R） 』 のどちらの項目なのかは判断しませんので何の選択かは判りません。ラベル（項目）を付けて明示すべきだと思います

≪ 目次　＜ 名前順要素一覧　［ 戻る ］　Top ↑

Created：Jun 01, 2005 Updated：Oct.,25,2011 © by おっちゃん
Oct.,25,2011 全面更新