如何用JS一次获取HTML表单的所有字段？

 <form>
    <label for="name">用户名</label>
    <input type="text" id="name" name="name" required>

    <label for="description">简介</label>
    <input type="text" id="description" name="description" required>

    <label for="task">任务</label>
    <textarea id="task" name="task" required></textarea>

    <button type="submit">提交</button>
  </form>

上面每个字段都有对应的type、id和name属性，以及相关联的label。用户点击"提交"按钮.

• 从事件target获取表单字段

首先，我们在表单上位submin事件注册一个事件侦听器，以停止默认行为（他们将数据发送到后端）
然后，使用this.elements或者event.target.elements访问表单字段。

相反，如果需要相应某些用户交互而动态添加更多的字段，那么我们需要使用FormData。

• 使用FormData

首先，我们在表单上为submit事件注册一个事件侦听器，以停止默认行为，接着我们从表单构建一个FormData对象 。

除了append()、delete()、get()、set()之外，FormData 还实现了Symbol.iterator。它可以用for...of 遍历。

方法一

<script type="text/javascript">
	const form = document.forms[0];
	form.addEventListener("submit", function(event) {
	  event.preventDefault();
	  const formData = new FormData(this);
	  for (const formElement of formData) {
		console.log(formElement);
		// ["name", "11"]
        // ["description", "22"]
        // ["task", "33"]
	  } 
	
	});
	
</script>

方法二

除了上述方法之外，entries()方法获取表单对象形式

<script type="text/javascript">
	const form = document.forms[0];
	form.addEventListener("submit", function(event) {
	  event.preventDefault();
	  const formData = new FormData(this);
	  const entries = formData.entries();
	  const data = Object.fromEntries(entries);
	  console.log(data)
	  // {name: "111", description: "2222", task: "333"}
	});
	
</script>