作为整体的表单

当一个字段被包含在<form>元素中时，其 DOM 元素会有一个form属性指向form的 DOM 元素。<form>元素则会有一个叫作elements属性，包含一个类似于数据的集合，其中包含全部的字段。

一个表单字段的name属性会决定在form提交时其内容的辨别方式。同时在获取form的elements属性时也可以作为一种属性名，所以elements属性既可以像数组（由编号来访问）一样使用也可以像映射一样访问（通过名字访问）。

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  let form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

type属性为submit的按钮在点击时，会提交表单。在一个form拥有焦点时，点击enter键也会有同样的效果。

通常在提交一个表单时，浏览器会将页面导航到form的action属性指明的页面，使用GET或POST请求。但是在这些发生之前，"submit"事件会被触发。这个事件可以由 JavaScript 处理，并且处理器可以通过调用事件对象的preventDefault来禁用默认行为。

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  let form = document.querySelector("form");
  form.addEventListener("submit", event => {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

在 JavaScript 中submit事件有多种用途。我们可以编写代码来检测用户输入是否正确并且立刻提示错误信息，而不是提交表单。或者我们可以禁用正常的提交方式，正如这个例子中，让我们的程序处理输入，可能使用fetch将其发送到服务器而不重新加载页面。