JS中FormData为空问题：如何通过FormData获取输入值与标签名

为什么FormData为空？ #

• input缺少name属性：FormData的核心规则是只收集带有name属性的表单控件（input、select、textarea等），你的<input>只有id没有name，所以不会被FormData识别。
• label不会被FormData自动收集：label只是用于提升表单可访问性的文本说明，FormData本身不会提取label的内容作为键值对的键，它只认表单控件的name属性作为键。

解决办法 #

方法1：给input添加name属性（标准方案） #

修改HTML，给input加上name属性，FormData会自动以name为键、input的value为值收集数据：

<form class="form">
  <div class="container">
    <label>URL</label>
    <input id="data-url" name="url" value="val" type="text" />
  </div>
</form>

运行原JS代码后，console.log([...formData])会输出：[["url", "val"]]

方法2：手动构建FormData（用label文本作为键） #

如果需要把label的文本作为键名，可以手动获取label和input的值，添加到FormData中：

const form = document.querySelector('.form');
const labelText = form.querySelector('label').textContent.trim();
const inputValue = form.querySelector('#data-url').value;

const formData = new FormData();
formData.append(labelText, inputValue);

console.log([...formData]); // 输出：[["URL", "val"]]

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