属性的标签标签可以与普通的 div 相关联吗？答案

【问题标题】：Can the label tags for attribute be associated with a normal div?属性的标签标签可以与普通的 div 相关联吗？
【发布时间】：2021-07-11 00:55:51
【问题描述】：

在 html5 定义下使用标签的“for”值作为普通 div 元素的 id 是否有效（例如，我制作了一个包含在 div 中的自定义下拉列表实现）

如果可能，请告诉我，

托马斯

【问题讨论】：

标签： html label specifications

【解决方案1】：

不符合规范：

某些元素（并非全部与表单相关）被归类为可标记元素。这些是可以与标签元素。

"button" "input" (如果type属性不处于隐藏状态) "keygen" “仪表”“输出”“进度”“选择”“文本区域”

http://www.w3.org/TR/html5/forms.html#category-label

另见：

可以指定 for 属性来指示表单控件要关联的标题。如果指定了属性，属性的值必须是可标记元素的 ID 与标签元素相同的文档。如果指定了属性并且 Document 中有一个元素的 ID 等于 for 属性，第一个这样的元素是可标记元素，那么该元素就是标签元素的标签控件。

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

【讨论】：

扩展，来自 HTML5 规范：The for attribute of the label element must refer to a form control
谢谢蒂姆，这是一个有趣的发现

【解决方案2】：

正如 Tim 所指出的，它不可能在本地进行，但是你可以用一点 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
    }
});

【讨论】：