ラベルは入力要素のみを参照できますか?

StackOverflow https://stackoverflow.com/questions/1094352

  •  11-09-2019
  •  | 
  •  

質問

W3School のコメント ラベル:

の <label> タグは、 入力 要素。 [私のことを強調]

これは、次の HTML が無効であることを意味しますか?

<!doctype html>
<html>
    <head>
         <title>Example document</title>
    </head>
    <body>
        <label for="x">Label</label> 
        <hr>
        <div id="q" contentEditable="true">Hello</div>
        <hr>
        <div id="x" contentEditable="true">World</div>
    </body>
</html>

Chrome と IE8 はどちらも次のことに重点を置いています World いつ Label はクリックされますが、Firefox はクリックしません。どちらが正しい？

役に立ちましたか？

解決

による W3C これはフォーム コントロールに適用され、フォーム コントロールは として定義される:

  • ボタン
  • チェックボックス
  • ラジオボタン
  • メニュー
  • テキスト入力
  • ファイル選択
  • 隠しコントロール
  • オブジェクトタグ

したがって、FireFox は技術的には正しいですが、ブラウザがこれらの要素に制限しなかった場合、FireFox が「破壊的」であるとはほとんど考えられません。

他のヒント

HTMLの仕様では、ラベルがあること、存在する場合、この属性の値は、同じドキュメント内のいくつかの他のコントロールのid属性の値と同じでなければなりません。場合は不在」、「for」属性label年代について、述べています定義されたが、要素の内容に関連している。 "

「のために」のid参照はコントロールのものでなければならないので。コントロールとは何ですか？スペックは、基本的にinput、button、またはselectあるとして任意のobjectは、コントロールであると言います。だから、Firefoxは技術的に正しいです - divはコントロールではありません。

。

私は、ラベルの意味は、彼らがコントロールのために特別であることをしているので、それは、マークアップの適切な使用はなかったと言うでしょう。

  

LABEL要素を指定するために使用され   ていないコントロールのラベル   暗黙のラベル、

http://www.w3.org /TR/html401/interact/forms.html#h-17.9.1する

最新の WhatWG 仕様には次のように書かれています。

一部の要素は、すべてがフォームに関連付けられているわけではありませんが、ラベル付け可能な要素として分類されます。これらは、label 要素に関連付けることができる要素です。

  • button, input (もし type 属性は非表示状態ではありません)、 meter, output, progress, select, textarea

...

の for 属性を指定して、キャプションが関連付けられるフォーム コントロールを示すことができます。属性が指定されている場合、その属性の値は、その属性と同じツリー内のラベル付け可能な要素の ID である必要があります。 label 要素。

（ソース： https://html.spec.whatwg.org/multipage/forms.html.)

言い換えれば、規格で許可されているのは for 属性は、上記の 7 つのタグ タイプのいずれかの要素を指します。質問に示されている HTML ( for 編集可能要素を指す要素 div) したがって、現在の仕様では技術的に無効な HTML です。

の Nu HTML チェッカー (つまり WhatWG によって承認されました) 同意する。質問からの HTML ドキュメントを検証するように要求すると、次のように表示されます。

エラー:の値は、 for の属性 label 要素は、非表示ではないフォーム コントロールの ID である必要があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top