如何将带form属性的外部表单元素纳入FormData并通过fetch发送？

针对HTML5中带form属性的外部控件无法被new FormData(form)自动收集的问题，有两个无需手动处理单选/复选框等特殊情况的简便方案：

方案一：利用formdata事件自动收集 #

浏览器在表单提交时会触发formdata事件，该事件会自动包含所有关联到目标表单的控件（包括带form属性的外部元素），我们可以手动触发这个事件来获取完整的FormData：

const targetForm = document.getElementById('your-form-id');
const fullFormData = new FormData();

// 监听formdata事件，收集所有数据
targetForm.addEventListener('formdata', (event) => {
  for (const [key, value] of event.formData) {
    fullFormData.append(key, value);
  }
}, { once: true }); // 只触发一次，避免重复监听

// 手动触发事件，触发后浏览器会自动收集所有关联控件的数据
targetForm.dispatchEvent(new Event('formdata'));

// 后续即可用fetch发送完整数据
fetch('/your-submit-url', {
  method: 'POST',
  body: fullFormData
});

这个方案完全依赖浏览器的内置逻辑，自动处理单选框选中状态、复选框勾选状态、禁用元素过滤等场景，无需自己写判断逻辑。

方案二：通过临时表单整合元素 #

创建一个临时表单，将原表单的所有元素和关联的外部控件都克隆进去，再用FormData构造函数生成数据：

const targetForm = document.getElementById('your-form-id');
// 获取所有关联到目标表单的外部控件
const externalControls = document.querySelectorAll(`[form="${targetForm.id}"]`);

// 创建临时表单容器
const tempForm = document.createElement('form');
// 克隆原表单元素到临时表单
tempForm.append(...Array.from(targetForm.elements).map(el => el.cloneNode(true)));
// 克隆外部控件到临时表单
tempForm.append(...Array.from(externalControls).map(el => el.cloneNode(true)));

// 生成包含所有元素的FormData
const fullFormData = new FormData(tempForm);

// 清理临时表单
tempForm.remove();

// 发送请求
fetch('/your-submit-url', {
  method: 'POST',
  body: fullFormData
});

这个方案利用FormData对表单元素的原生处理能力，同样不需要手动处理特殊控件的状态逻辑，适合不想使用事件监听的场景。

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