作为整体的表单

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

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

  1. <form action="example/submit.html">
  2.   Name: <input type="text" name="name"><br>
  3.   Password: <input type="password" name="password"><br>
  4.   <button type="submit">Log in</button>
  5. </form>
  6. <script>
  7.   let form = document.querySelector("form");
  8.   console.log(form.elements[1].type);
  9.   // → password
  10.   console.log(form.elements.password.type);
  11.   // → password
  12.   console.log(form.elements.name.form == form);
  13.   // → true
  14. </script>

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

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

  1. <form action="example/submit.html">
  2.   Value: <input type="text" name="value">
  3.   <button type="submit">Save</button>
  4. </form>
  5. <script>
  6.   let form = document.querySelector("form");
  7.   form.addEventListener("submit", event => {
  8.     console.log("Saving value", form.elements.value.value);
  9.     event.preventDefault();
  10.   });
  11. </script>

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