ラベルの「for」値を通常の div 要素の id として使用することは、html5 定義の下で有効な html ですか?
できれば教えてください、
トーマス
ラベルの「for」値を通常の div 要素の id として使用することは、html5 定義の下で有効な html ですか?
できれば教えてください、
トーマス
仕様によるものではありません:
すべてがフォームに関連付けられているわけではなく、一部の要素は、ラベル付け可能な要素として分類されます。これらは、ラベル要素に関連付けることができる要素です。
「button」「input」(type属性が非表示状態でない場合)「keygen」「meter」「output」「progress」「select」「textarea」
http://www.w3.org/TR/html5/forms.html#category-label
以下も参照してください。
for 属性を指定して、キャプションが関連付けられるフォーム コントロールを示すことができます。属性が指定されている場合、属性の値は label 要素と同じ Document 内のラベル付け可能な要素の ID でなければなりません。属性が指定され、ID が for 属性の値と等しい Document 内の要素があり、そのような最初の要素がラベル付け可能な要素である場合、その要素は label 要素のラベル付きコントロールです。
http://www.w3.org/TR/html5/the-label-element.html#attr-label-for
質問は有効なユースケースを示していると思います。このようなシナリオで推奨されるパターンはわかりませんが、ARIA 属性はマークアップをよりアクセスしやすくするのに役立つ可能性があります。
https://developer.mozilla.org/en/Accessibility/ARIA/forms/Basic_form_hints https://developer.mozilla.org/Special:Tags?tag=ARIA
ティムが指摘したように、ネイティブで行うことはできませんが、JavaScript を少し使えばシミュレートできます。
jQuery(document).delegate('[for]','click',function(e){
var targetEl = jQuery('#'+jQuery(this).attr('for'));
if(targetEl.is('div.your-custom-dropdown-class')) { //if targetEl is one of your dropdowns
e.preventDefault();
targetEl.trigger('click'); //open the drop down
}
});