[4] HTML の label 要素は、
制御子に情報を添付するために使うことができます。
[19] 仕様書:
%formctrl な文脈(%inline)* −label| 属性名 | 属性値 | 既定値 | 説明 | 出典 |
accesskey | %Character | [HTML 4] | ||
class | (なし) | 級 | [HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common | |
dir | 書字方向 | [HTML 4] %i18n ⊂ %attrs, [XHTML 1] I18N ⊂ Common | ||
for | IDREF | 対象制御子 | [HTML 4] | |
id | ID | (なし) | 一意識別子 | [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
と説明があります。
[41]
通常、 HTML 文書の構文解析では、
label の開始タグは、
開いている label
要素を閉じます。
WF2 2.18
[21] 制御子には、押しボタン系のように自動的に関連付けられた名札
(暗示的名札) を持つものと、
そうでないもの (文章入力欄、チェック箱、ラジオボタン、メニュー) があります。
暗示的名札を持つものでは 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
利用者エージェントは、
事象を処理する際、
対象節点から泡立ちして上っていって最初の
label にとって適当な既定動作をその事象の既定動作としなければなりません。
WF2 2.18
[30] label は、フォーム外でも使えます HTML 4 18.2.3。
詳しくは制御子の説明をごらんください。
[31] label は、なんとなく、対象となる制御子と同じフォーム
(または同じくフォーム外) に入れるものと思われていると感じますが、
少なくても HTML 4 仕様書には、そのような制限はありません。
ですから、他のフォームの制御子を参照してもかまわないはずです。
もっとも、一般にはそのような利用の仕方は利用者の混乱を招くだけでしょう。
役に立つことはあまりないと思われます。しかし、フォーム外の
label からフォーム内へのリンクは、若干の需要はあるかもしれません。
(表のこま内に配置する場合など。)
しかし、このような場合に、 DOM の form
属性を使ったスクリプト等が意図していない動作をするかもしれませんから、
一応注意は必要でしょう。
[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] 名札は色々にレンダリングして構いません。 例:
[38] 挙動に関する利用者エージェントへの制約
label の既定の表現と動作は、
利用者エージェントの環境のものと一致するべきです。
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><labelfor="ANCHOR">いいことがあります。</label></p> <p><ahref="something-bad"id="ANCHOR">わるいことがあります。</a></p>
先述のような利用者エージェントでは、利用者がいいこと
を期待して
label を活性化すると、実際にはわるいこと
が起こってしまいます。
(もちろんこの例は説明のためのものであり、実際にはいくらでもわかりにくく危険にできます。)
この問題は利用者エージェントが label
の活性化によって参照先まで活性化しないように実装をかえれば解決します。
それでも a の onfocus
にわるいこと
を仕込むのは可能ですが、これは label
の問題というよりはスクリプトを使うことそのものによる問題といえます。
[5] 例えば、名前: __________
という form 断片があったとすると、このうちの
「名前: 」の部分が label 要素となります。
<label for="NAME">名前: </label><input type="text" name="name" id="NAME" />
(または、 「______」の部分 (input 要素。)
も含めて label 要素としても構いません。
<label>名前: <input type="text" name="name" /></label>
)
<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>
[16] Design Issues for HTML Forms, , https://www.w3.org/TR/WD-forms-960308.html
[6] >>5 後半 いまふと思ったんですけど、この2つの書き方って常に可能なんでしょうか?
構文的には多分問題ないですけど、意味的に。たとえば >>5 の例だと、入力欄の部分まで
ラベル
としてマーク付けすることの妥当性が疑問だなと。
[7] >>6 かといって一々入力欄に id 属性を与えるのも冗長ですよね。
form 要素内にある label 要素だったら
for 属性の値は name 属性の値を指してもいい、
とかないんでしょうか? (でも radio で困るか。)
[11] XLink の xlink:label 属性は、
資源の識別名を与えます。
この名前は、 arc 型要素で資源を指定するために使用します。
仕様書: http://www.w3.org/TR/xlink/#traversal-atts
この属性は、 resource 型または
locator 型の要素で使用できます。
この属性の値は XML名前空間 (1.0) の
NCName です。
XLink 仕様書の DTD
例では NMTOKEN として宣言されています。
[12] この属性の値は識別子ですが、一意識別子ではありません。
同じ親 extended 型要素内の別の資源要素が同じ値を持っていても構いません。
[13]
1995年5月に hr に text 属性 (新設) で罫線に加えてレンダリングする文字列を指定することが提案され、
すぐに Emacs/W3 で実装されました。
textalign 属性 (新設) で文字列のレンダリング位置を指定します。
[44]
>>13 の ietf-html の記事で提案されたのは
text と aligntext でしたが、
Emacs/W3 の方で実装されたのは
label と textalign のようです。
::label 擬似要素[18] [ct] (0) WF2: <label> element summary; make <label> and <fieldset> as…, Hixie, , https://github.com/whatwg/html/commit/62b5a0e8a5401979e39444abd25b69266a198bf8
[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
[10] Explain label activation behavior + custom elements (domenic, , ) https://github.com/whatwg/html/commit/836294cbb6c7a9e0364293a29b308afd5eee1eba
[14] Activation behavior of label elements pointing to form-associated custom elements · Issue #5009 · whatwg/html () https://github.com/whatwg/html/issues/5009
[15] Explain label activation behavior + custom elements by domenic · Pull Request #5021 · whatwg/html () https://github.com/whatwg/html/pull/5021
labelをかちっすると、 チェック箱において事象clickが放たれるべきです。 WF2 2.3