HTML中fieldset元素的form属性的实际作用是什么？

fieldset的form属性实际作用说明 #

首先明确核心前提：fieldset的form属性不会自动传递给内部的表单控件，你测试中unhappy输入框不会随表单提交是符合规范的预期行为，内部输入框要关联对应表单需要单独给输入框添加form属性。

fieldset和form通过form属性建立关联后，实际生效的作用有以下几点：

• 表单元素集合纳入：关联后的fieldset会出现在对应表单的elements属性集合中，你可以直接通过表单DOM.elements获取到该fieldset对象，方便统一操作同分组的字段
• 表单事件冒泡接收：当所属表单触发submit、reset等原生表单事件时，关联的fieldset会接收到对应的事件冒泡，你可以直接在fieldset上绑定事件监听，实现分组级别的提交/重置自定义逻辑，比如批量清空分组内的自定义组件状态
• 校验与状态联动：表单触发原生有效性校验时，关联的fieldset会自动继承表单的校验状态伪类（比如:invalid、:user-valid等），可以直接通过CSS给分组设置校验状态下的样式；另外如果给fieldset设置disabled属性，其内部所有表单控件都会被禁用，且该禁用状态会被纳入表单的整体状态判断
• 无障碍识别优化：屏幕阅读器等无障碍工具会自动识别fieldset与表单的关联关系，读屏时会将fieldset的legend分组说明和所属表单绑定播报，降低视障用户的理解成本

内容的提问来源于stack exchange，提问作者Jan Turoň