为什么通过FormData获取表单数据始终为空？

我有一个包含表单的HTML页面，以及一个给按钮添加监听事件的JS脚本，相关代码如下：

HTML代码

<html>
  <head>
    <script type="text/javascript" src="login.js" defer></script>
  </head>
  <body>
    <form id="form">
      <table>
        <tr>
          <td>Username</td>
          <td><input type="text" id="user" value=""></td>
        </tr>  
        <tr>
          <td>password</td>
          <td><input type="text" id="pass" value=""></td>
        </tr>
      </table>
      <button type="button" id="btn">send</button>
    </form>
  </body>
</html>

JavaScript代码

const form = document.getElementById("form");
const btn = document.getElementById("btn");

btn.addEventListener("click", (e) => {
  const payload = new FormData(form);

  console.log([...payload]);
})

点击按钮后控制台打印结果为空数组：

[]
[[prototype]]:array(0)

我尝试过通过const form = e.target.closest('form');获取表单，结果依然相同。但单独打印document.getElementById("user").value能正常输出输入的值，说明表单里是有数据的，请问为什么FormData获取不到？

FormData构造函数收集表单数据时，只会识别带有name属性的表单元素，你的<input>标签只设置了id，没有添加name属性，所以无法被FormData捕获。

只需要给两个输入框加上name属性即可，修改后的HTML代码如下：

<html>
  <head>
    <script type="text/javascript" src="login.js" defer></script>
  </head>
  <body>
    <form id="form">
      <table>
        <tr>
          <td>Username</td>
          <td><input type="text" id="user" name="user" value=""></td>
        </tr>  
        <tr>
          <td>password</td>
          <td><input type="text" id="pass" name="pass" value=""></td>
        </tr>
      </table>
      <button type="button" id="btn">send</button>
    </form>
  </body>
</html>

修改后再次点击按钮，控制台就能正常打印出包含表单数据的数组了：

[["user", "输入的用户名"], ["pass", "输入的密码"]]

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