为何fieldset子元素未继承其关联的form？HTML5规则问询

这个问题确实有点反直觉，我当初第一次碰到的时候也懵了——明明fieldset把这些控件包起来了，为啥它的form属性不能让子控件自动关联对应表单？其实核心原因是HTML5规范的明确设计，咱们一步步说：

1. 规范的明确规定 #

HTML5里，form属性是专门给表单控件（比如<input>、<select>、<button>这类）设计的专属属性。虽然<fieldset>也允许设置form属性，但这个属性的作用仅仅是让<fieldset>自身（作为一个整体组件）关联到指定表单，比如让fieldset的验证状态归属到这个表单，或者让legend的描述和表单挂钩——它不会把这个关联关系传递给内部的子控件。

子控件要关联到某个表单，只有两种方式：

• 直接放在<form>标签内部；
• 给控件自身添加form属性，指定目标表单的id。

2. 为什么要这么设计？ #

你觉得逻辑不通很正常，但规范这么设计其实是出于实用性和灵活性的考虑：

• 避免意外的批量关联错误：如果fieldset的form属性会被子元素继承，那一旦你不小心把fieldset的form值写错，里面所有控件都会跟着关联到错误的表单，排查起来会很麻烦。让每个控件自主设置关联，能减少这种低级错误的影响范围。
• 支持更复杂的页面结构：有时候我们需要一个fieldset里的不同控件关联到不同的表单，比如一部分控件提交到表单A，另一部分提交到表单B。如果强制继承fieldset的form属性，这种场景就无法实现了，而现在的设计保留了这种灵活性。

举个例子看差异 #

你的示例代码（简化后）：

<form id="myform"></form>
<form id="foobar"></form>
<fieldset form="foobar">
  <input type="text" name="test">
</fieldset>

这里的<input>不会关联到foobar表单，因为它自己没有设置form="foobar"。如果要让它关联，必须修改成：

<form id="myform"></form>
<form id="foobar"></form>
<fieldset form="foobar">
  <input type="text" name="test" form="foobar">
</fieldset>

额外补充：fieldset的form属性到底有啥用？ #

它主要是为了让fieldset的整体状态和目标表单绑定，比如当表单提交时，如果fieldset里的控件有验证错误，fieldset会和表单一起触发验证提示；或者当表单被重置时，fieldset的状态也会跟着重置——但这些都不影响子控件的表单归属。

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