label标签能否包裹关联input元素？是否符合HTML规范与惯例？

你的第二种写法完全合法且符合HTML规范与通用开发惯例，详细说明如下：

两种关联label与复选框的合法写法 #

写法1：通过for+id绑定 #

<input type="checkbox" id="foo" /><label for="foo">Foo!</label>

这种写法中，input和label是独立DOM元素，两者间的空白区域不属于任何可点击触发范围，会出现你提到的点击无效问题。

写法2：将input嵌套在label内部 #

<label for="foo"><input type="checkbox" id="foo" />Foo!</label>

这种写法是HTML规范明确允许的，此时label会自动关联内部的input元素（即使不写for属性也生效，写了也不会有冲突）。

嵌套写法的优势与合理性 #

• 交互体验更优：整个label容器内的所有区域（包括复选框、文字、以及两者间的空白）点击都会触发复选框切换，彻底解决了空白区域点击无效的问题。
• 符合开发惯例：这种写法在实际前端开发中被广泛使用，是处理表单控件与标签关联的常用方案之一。
• 兼容性良好：所有现代浏览器及绝大多数旧版本浏览器都完全支持该写法，不存在兼容性隐患。

内容的提问来源于stack exchange，提问作者sh1