label

label

label 要素型 (HTML, XHTML 1)

[4] HTMLlabel 要素は、 制御子に情報を添付するために使うことができます。

[19] 仕様書:

[20]

開始タグ
必須
終了タグ
必須
出現できる文脈
%formctrl な文脈
内容模型
(%inline)* −label
属性
属性名属性値既定値説明出典
accesskey%Character[HTML 4]
class(なし)[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] CoreCommon
dir書字方向[HTML 4] %i18n ⊂ %attrs, [XHTML 1] I18N ⊂ Common
forIDREF対象制御子[HTML 4]
idID(なし)一意識別子[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common
lang自然言語[HTML 4] %i18n ⊂ %attrs
xml:lang自然言語[XHTML 1] I18N ⊂ Common
onblur%Script(なし)失焦点時[HTML 4]
onclick%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
ondblclick%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onfocus%Script(なし)得焦点時[HTML 4]
onkeydown%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onkeypress%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onkeyup%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onmousedown%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onmousemove%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onmouseout%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onmouseover%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onmouseup%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
selected(真偽値属性)(偽)初期選択[HTML 4]
styleスタイル情報[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Style ⊂ Common
title注釈的題[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common

[33] HTML 4 DTD 注釈 (参考) には form field label text と説明があります。

内容

構文解析(HTML)

[41] 通常、 HTML 文書構文解析では、 label開始タグは、 開いている label 要素を閉じます。 WF2 2.18

メモ

フォーム

[21] 制御子には、押しボタン系のように自動的に関連付けられた名札 (ラベル) (暗示的 (implicit) 名札) を持つものと、 そうでないもの (文章入力欄、チェック箱、ラジオボタン、メニュー) があります。 暗示的名札を持つものでは UA はその名札を使うべきですが、 それ以外の制御子では label 要素を使って著者が名札を指定できます。 HTML 4 17.9

ところで、ファイル選択制御子 (input//file) や物体制御子 (object) などはどうなのでしょうかね? 暗示的名札は持たないように見えますが、 HTML 4 のそうでないものetc. などと書かれておらず、例示ではないように読めますが・・・。

[22] label 要素は、丁度1つのフォーム制御子と関連付けます。

  • 陽に関連付けるには、 for 属性を使います。 (この方法を使うと、複数の label を同じ制御子に関連付けることができます。)
  • 陰に関連付けるには、制御子要素を label 要素の中に入れます。 1つの label に入れることができるのは、1つの制御子要素だけです。 名札自体は制御子の前後どこにあっても構いません。

HTML 4 17.9.1

陰な方で前後両方にあっても構わないとは書かれていませんけど、どうなのでしょう。

[39] 複数の制御子

for 内容属性がなく、 label 要素内に複数のフォーム制御子が存在する場合、 control DOM属性文書順で最初のフォーム制御子を返す値としなければなりませんlabel活性化した場合、 文書順で最初のフォーム制御子活性化または焦点を送信しなければなりませんWF2 2.18

[40] label の入れ子

利用者エージェントは、 事象を処理する際、 対象節点から泡立ちして上っていって最初の label にとって適当な既定動作をその事象既定動作しなければなりませんWF2 2.18

出現する文脈

[30] label は、フォーム外でも使えます HTML 4 18.2.3。 詳しくは制御子の説明をごらんください。

[31] label は、なんとなく、対象となる制御子と同じフォーム (または同じくフォーム外) に入れるものと思われていると感じますが、 少なくても HTML 4 仕様書には、そのような制限はありません。 ですから、他のフォームの制御子を参照してもかまわないはずです。

もっとも、一般にはそのような利用の仕方は利用者の混乱を招くだけでしょう。 役に立つことはあまりないと思われます。しかし、フォーム外の label からフォーム内へのリンクは、若干の需要はあるかもしれません。 (表のこま内に配置する場合など。)

しかし、このような場合に、 DOMform 属性を使ったスクリプト等が意図していない動作をするかもしれませんから、 一応注意は必要でしょう。

内容

[8] label 要素の子孫に label 要素は存在できません HTML 4, XHTML 1.0

また、定義上 (>>22)、制御子要素も高々1つしか入れることができません。 また、関連付けることのできる制御子は丁度1つなので、 for 属性を使う時は子孫に制御子要素を入れることができないはずです。 逆に for 属性を使わない時は1つ制御子を入れなければなりません。

[34] HTML 4 DTD の注釈 (参考) には Each label must not contain more than ONE field と説明があります。 (名無しさん [sage])

レンダリング

[23] label焦点を受取ったら、 関連付けられた制御子に焦点を渡します。 HTML 4 17.9.1

[24] 名札は色々にレンダリングして構いません。 例:

  • 視覚的に HTML 4 17.9
  • 発話合成器で読上げ HTML 4 17.9
  • 文字色・背景色を他と変えて
  • 太字で
  • 対応する制御子が焦点を持っているときには普段と別な表示で (色を変えたり、枠線をつけたり)

[38] 挙動に関する利用者エージェントへの制約

label既定表現動作は、 利用者エージェント環境のものと一致するべきですWF2 2.3

例えば、チェック箱名札かちっするとチェック状態が変化する環境では、 labelかちっすると、 チェック箱において事象 click が放たれるべきです。 WF2 2.3

ただし、 label 内のフォーム制御子リンクなど対話的要素対象とする事象は、 名札自体が取扱いしてはなりませんWF2 2.3

実装

[25] >>21 を厳密に解釈すると、押しボタンに label は使えないはずですが、実際の UA や文書では使える・使っていることがしばしばあります。 そのような UA の中には、名札が押されるとボタン自体が押されたのと同じことになるものがあります。 そのような動作は、見た目がボタン状でないものを押すだけでボタンが押されてしまうという、 利用者がおそらく意図していない結果になるので、好ましくありません。

[26] 多くの視覚 UA では、チェック箱やラジオ・ボタンの名札をマウスでかちっすると、 その項目が選択された状態となります。

可用性とアクセス可能性

[28] チェック箱やラジオ・ボタンでは、 label 要素が存在することが使いやすさのために特に重要です。 多くの視覚 UA では、チェック箱やラジオ・ボタンは、 1文字分程度の大きさの記号によって表示され、 その記号をマウスでかちっすることで「入」・「切」 を切替えることができます。

しかし、その1文字程度の大きさにマウスを合わせることは面倒であり、 状況によっては困難です。ですから、 >>26 のような実装がなされていると、 多くの GUI 環境の一般的なチェック箱やラジオ・ボタンの実装と同様に、 記号のみならず説明文をかちっすることで状態を切替えられます。

[29] 名札としてハイパーリンクや任意の物体を配置することは仕様上は禁止されていません。 しかし、多くの UA で、名札を選択する動作とリンクをたどる操作などに同じ マウスのかちっが割当てられています。ですから、 利用者にとって意図せぬ動作をしたり、操作しづらくなったりする可能性があります。

安全性

[32] 使用上は曖昧ですが、利用者エージェントによっては、 ハイパーリンクボタンlabel を指定しても著者の意図した通りに機能します。しかも、 焦点が向けられるのみならず活性化されてしまうこともあります。

例えば、次の例を考えてみてください。

<p><label for="ANCHOR">いいことがあります。</label></p>
<p><a href="something-bad" id="ANCHOR">わるいことがあります。</a></p>

先述のような利用者エージェントでは、利用者いいことを期待して label を活性化すると、実際にはわるいことが起こってしまいます。 (もちろんこの例は説明のためのものであり、実際にはいくらでもわかりにくく危険にできます。)

この問題は利用者エージェントが label の活性化によって参照先まで活性化しないように実装をかえれば解決します。 それでも aonfocusわるいことを仕込むのは可能ですが、これは label の問題というよりはスクリプトを使うことそのものによる問題といえます。

[5] 例えば、名前: __________ という form 断片があったとすると、このうちの 「名前: 」の部分が label 要素となります。

<label for="NAME">名前: </label><input type="text" name="name" id="NAME" />

(または、 「______」の部分 (input 要素。) も含めて label 要素としても構いません。

<label>名前: <input type="text" name="name" /></label>

)

[37] img を指す例

<A accesskey="n"
					HREF="connected_wizard.htm"
					TABINDEX="32"
					>
					<LABEL for="next" STYLE="visibility:hidden">次へ</LABEL
					><IMG SRC="bluearrow.gif" HEIGHT="13" WIDTH="13" BORDER="0" ID="next" ALT="次へ" ></A>

(名無しさん)

メモ

[6] >>5 後半 いまふと思ったんですけど、この2つの書き方って常に可能なんでしょうか? 構文的には多分問題ないですけど、意味的に。たとえば >>5 の例だと、入力欄の部分まで ラベルとしてマーク付けすることの妥当性が疑問だなと。

[7] >>6 かといって一々入力欄に id 属性を与えるのも冗長ですよね。 form 要素内にある label 要素だったら for 属性の値は name 属性の値を指してもいい、 とかないんでしょうか? (でも radio で困るか。)

xlink:label 属性 (XLink)

[11] XLinkxlink:label 属性は、 資源の識別名を与えます。 この名前は、 arc 型要素で資源を指定するために使用します。

仕様書: <http://www.w3.org/TR/xlink/#traversal-atts>

この属性は、 resource 型または locator 型の要素で使用できます。 この属性の値は XML名前空間 (1.0) の NCName です。 XLink 仕様書の DTD 例では NMTOKEN として宣言されています。

[12] この属性の値は識別子ですが、一意識別子ではありません。 同じ親 extended 型要素内の別の資源要素が同じ値を持っていても構いません。

hr 要素 label 属性 (HTML)

[13] 1995年5月に hrtext 属性 (新設) で罫線に加えてレンダリングする文字列を指定することが提案され、 すぐに Emacs/W3 で実装されました。 textalign 属性 (新設) で文字列のレンダリング位置を指定します。

[44] >>13ietf-html の記事で提案されたのは textaligntext でしたが、 Emacs/W3 の方で実装されたのは labeltextalign のようです。

::label 擬似要素

歴史

XBL2

[49] XBL2 ではこの擬似要素影木要素を関連付けることができました。

メモ

[45] (X)HTML5 Tracking ( 版) <http://html5.org/tools/web-apps-tracker?from=4574&to=4575>

[46] IRC logs: freenode / #whatwg / 20100412 ( 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20100412#l-887>

[47] Web Applications 1.0 r5432 Disallow <label> to be used with <input type=hidden>.Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10146 ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=5431&to=5432>

[50] XBL 2.0 ( ( 版)) <http://dev.w3.org/2006/xbl2/Overview.html#pseudo-list>

[51] XML Binding Language (XBL) 2.0 ( ( 版)) <http://www.w3.org/TR/2007/CR-xbl-20070316/#pseudo-list>

[52] Web Applications 1.0 r4531 Make <progress>, <meter>, and <output> labelable with <label>. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=4530&to=4531>

[53] Web Applications 1.0 r8868 Match reality: the label in <option label=> is ignored if empty.]] ( ( 版)) <https://html5.org/r/8868>

[54] Web Applications 1.0 r8871 Fix mistakes resulting from earlier checkins (meta, <option>.label) ( ( 版)) <https://html5.org/r/8871>

[1] 27293 – <label> element content model ( 版) <https://www.w3.org/Bugs/Public/show_bug.cgi?id=27293>

[2] Remove <label form> and redefine label.form IDL attribute ( (zcorpan著, )) <https://github.com/whatwg/html/commit/99f0f1ae017523276ea4dd5784ec63a23a23834d>

[3] Align activation behavior with changes to DOM Standard (annevk著, ) <https://github.com/whatwg/html/commit/7beb920ba2e1a71246b81d86005f223a0d7ac8ab>

[9] addition/proposal <controlset/> or <formgroup/> · Issue #3537 · whatwg/html () <https://github.com/whatwg/html/issues/3537>