596.txt

* label 要素型 (HTML, XHTML 1)

[4] [[HTML]] の [DFN[[CODE(HTMLe)[label]] 要素]]は、
[[制御子]]に情報を添付するために使うことができます。

[19] 仕様書:
- [[HTML 4]] ([[Web Forms 1.0]])
-- [CITE[17.9 Labels]]
<IW:HTML4:"interact/forms.html#form-labels">
-- [CITE[18.2.3 Intrinsic events]]
<IW:HTML4:"interact/scripts.html#idx-control">
- [[XHTML 1.0]]
<http://www.w3.org/TR/xhtml1/#prohibitions>
- [[Web Forms 2.0]]
-- [CSECTION@en[2.3. Changes to existing controls]]
<IW:WF2:"#changes">
-- [CSECTION@en[2.18. Handling unexpected elements and values]]
<IW:WF2:"#handling">

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


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


** 内容


*** 構文解析(HTML)

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

[[#comment]]


*** メモ

[[#comment]]


** フォーム

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

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

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

[SRC[HTML 4 17.9.1]]

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

[39] '''複数の制御子'''

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

[40] '''[CODE(HTMLe)@en[label]] の入れ子'''

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

[[#comment]]


** 出現する文脈

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

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

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

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

[[#comment]]


** 内容

[8] [CODE(HTMLe)[label]] 要素の子孫に [CODE(HTMLe)[label]] 要素は存在できません
[SRC[HTML 4, XHTML 1.0]]。

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

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

[[#comment]]


** レンダリング

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

[24] 名札は色々にレンダリングして構いません。 例:
- 視覚的に [SRC[HTML 4 17.9]]
- 発話合成器で読上げ [SRC[HTML 4 17.9]]
- 文字色・背景色を他と変えて
- 太字で
- 対応する制御子が焦点を持っているときには普段と別な表示で
(色を変えたり、枠線をつけたり)

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

[CODE(HTMLe)@en[[[label]]]] の[[既定]]の[[表現]]と[[動作]]は、
[[利用者エージェント]]の[[環境]]のものと一致[['''するべきです''']]。
[SRC@en[WF2 2.3]]

;; 
例えば、[[チェック箱]]の[[名札]]を[[かちっ]]するとチェック状態が変化する環境では、
[CODE(HTMLe)@en[[[label]]]] を[[かちっ]]すると、
[[チェック箱]]において[[事象]] [CODE(DOMe)@en[[[click]]]]
が放たれるべきです。
[SRC@en[WF2 2.3]]

ただし、 [CODE(HTMLe)@en[[[label]]]]
内の[[フォーム制御子]]や[[リンク]]など[[対話的要素]]を[[対象]]とする[[事象]]は、
[[名札]]自体が[[取扱い]][['''してはなりません''']]。
[SRC@en[WF2 2.3]]

[[#comment]]


** 実装

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

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

[[#comment]]


** 可用性とアクセス可能性

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

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

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

[[#comment]]


** 安全性

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

例えば、次の例を考えてみてください。
[PRE(example deprecated HTML)[
<[CODE(HTMLe)[p]]><[CODE(HTMLe)[label]] [CODE(HTMLa)[for]]="ANCHOR">いいことがあります。</[CODE(HTMLe)[label]]></[CODE(HTMLe)[p]]>
<[CODE(HTMLe)[p]]><[CODE(HTMLe)[a]] [CODE(HTMLa)[href]]="something-bad" [CODE(HTMLa)[id]]="ANCHOR">わるいことがあります。</[CODE(HTMLe)[a]]></[CODE(HTMLe)[p]]>
]PRE]

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

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

[[#comment]]


** 例

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

[PRE(HTML)[
<label for="NAME">名前: </label><input type="text" name="name" id="NAME" />
]PRE]

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

[PRE(HTML)[
<label>名前: <input type="text" name="name" /></label>
]PRE]

)

[37]
[CODE(HTMLe)@en[[[img]]]] を指す例
[PRE(HTML invalid example code)[
<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>
]PRE]

;; 出典: [[Windows XP]] [[日本語版]]の [CODE(file)@en[C:\windows\help\Tours\htmlTour\connected_networks.htm]]

([[名無しさん]])

[[#comment]]


** メモ

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

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

* xlink:label 属性 (XLink)

[11] [[XLink]] の [DFN[[CODE(XMLa)[[VAR[xlink:]]label]] 属性]]は、
[[資源]]の識別名を与えます。
この名前は、 [CODE(XML)[[[arc]]]] 型要素で資源を指定するために使用します。 

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

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

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

[[#comment]]


* hr 要素 label 属性 (HTML)

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

- [[ietf-html]]: ''html-wg-95q2: text in the <HR> tag'' <http://ksi.cpsc.ucalgary.ca/archives/HTML-WG/html-wg-95q2.messages/0671.html>
- ''Emacs-w3 User's Manual - Supported Markup Languages'' <http://www.informatik.uni-hamburg.de/RZ/software/emacs/w3/w3_2.html#SEC6>

[44]
>>13 の [[ietf-html]] の記事で提案されたのは
[CODE(HTMLa)@en[[[text]]]] と [CODE(HTMLa)@en[[[aligntext]]]] でしたが、
[[Emacs/W3]] の方で実装されたのは
[CODE(HTMLa)@en[[[label]]]] と [CODE(HTMLa)@en[[[textalign]]]] のようです。

* [CODE(CSS)@en[::label]] 擬似要素

** 歴史

*** XBL2

[REFS[
- [48] [CITE@en-US[XBL 2.0]] ([TIME[2010-09-03 10:10:02 +09:00]] 版) <http://dev.w3.org/2006/xbl2/Overview.html#matching-pseudo-elements>
]REFS]

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


* メモ

[45] [CITE@en[(X)HTML5 Tracking]]
([TIME[2010-01-11 23:33:06 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=4574&to=4575>

[46] [CITE[IRC logs: freenode / #whatwg / 20100412]]
([TIME[2010-04-26 08:15:38 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20100412#l-887>

[47] [CITE@en[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]]
( ([TIME[2010-09-08 08:59:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=5431&to=5432>

[50] [CITE@en-US[XBL 2.0]]
( ([TIME[2012-05-03 02:23:03 +09:00]] 版))
<http://dev.w3.org/2006/xbl2/Overview.html#pseudo-list>

[51] [CITE@en-US[XML Binding Language (XBL) 2.0]]
( ([TIME[2007-03-16 22:20:16 +09:00]] 版))
<http://www.w3.org/TR/2007/CR-xbl-20070316/#pseudo-list>

[52] [CITE@en[Web Applications 1.0 r4531       Make <progress>, <meter>, and <output> labelable with <label>.]]
( ([TIME[2010-01-07 12:40:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=4530&to=4531>

[53] [CITE@en[Web Applications 1.0 r8868  Match reality: the label in <option label=''> is ignored if empty.]]
( ([TIME[2014-12-04 06:30:00 +09:00]] 版))
<https://html5.org/r/8868>

[54] [CITE@en[Web Applications 1.0 r8871  Fix mistakes resulting from earlier checkins (meta, <option>.label)]]
( ([TIME[2014-12-04 10:25:00 +09:00]] 版))
<https://html5.org/r/8871>

[1] [CITE@en[27293 – <label> element content model]]
([TIME[2015-09-07 12:58:02 +09:00]] 版)
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=27293>

[2] [CITE@en[Remove <label form> and redefine label.form IDL attribute]]
( ([[zcorpan]]著, [TIME[2016-04-28 22:48:52 +09:00]]))
<https://github.com/whatwg/html/commit/99f0f1ae017523276ea4dd5784ec63a23a23834d>

[3] [CITE@en[Align activation behavior with changes to DOM Standard]]
([[annevk]]著, [TIME[2016-10-21 00:06:40 +09:00]])
<https://github.com/whatwg/html/commit/7beb920ba2e1a71246b81d86005f223a0d7ac8ab>

[9] [CITE@en[addition/proposal <controlset/> or <formgroup/> · Issue #3537 · whatwg/html]]
([TIME[2018-03-23 02:10:53 +09:00]])
<https://github.com/whatwg/html/issues/3537>