提交表单

1. 表单基础

     Web 表单在 HTML 中以

窗体顶端

元素表示，在 JavaScript 中则以 HTMLFormElement 类型表示。 HTMLFormElement 类型继承自 HTMLElement 类型，因此拥有与其他 HTML 元素一样的默认属性。不 过，HTMLFormElement 也有自己的属性和方法。 q             acceptCharset：服务器可以接收的字符集，等价于 HTML 的 accept-charset 属性。 q

action：请求的 URL，等价于 HTML 的 action 属性。 q

elements：    表单中所有控件的 HTMLCollection。 q

enctype：请求的编码类型，等价于 HTML 的 enctype 属性。 q

    length：表单中控件的数量。 q

    method：HTTP 请求的方法类型，通常是"get"或"post"，等价于 HTML 的 method 属性。 q

name：表单的名字，等价于 HTML 的 name 属性。 q

    reset()：把表单字段重置为各自的默认值。 q

submit()：提交表单。 q

target：用于发送请求和接收响应的窗口的名字，等价于 HTML 的 target 属性。 有几种方式可以取得对元素的引用。最常用的是将表单当作普通元素为它指定一个 id 属 性，从而可以使用 getElementById()来获取表单，比如：

let form = document.getElementById("form1");

此外，使用 document.forms 集合可以获取页面上所有的表单元素。然后，可以进一步使用数字 索引或表单的名字（name）来访问特定的表单。比如：

// 取得页面中的第一个表单 let firstForm = document.forms[0];

// 取得名字为"form2"的表单 let myForm = document.forms["form2"];

窗体底端

窗体底端

较早的浏览器，或者严格向后兼容的浏览器，也会把每个表单的 name 作为 document 对象的属性。 例如，名为"form2"的表单可以通过 document.form2 来访问。不推荐使用这种方法，因为容易出错， 而且这些属性将来可能会被浏览器删除。

注意，表单可以同时拥有 id 和 name，而且两者可以不相同。

1. 提交表单

表单是通过用户点击提交按钮或图片按钮的方式提交的。提交按钮可以使用 type 属性为"submit" 的或元素来定义，图片按钮可以使用 type 属性为"image"的元素来定义。 点击下面例子中定义的所有按钮都可以提交它们所在的表单： Submit Form

   如果表单中有上述任何一个按钮，且焦点在表单中某个控件上，则按回车键也可以提交表单。 （textarea 控件是个例外，当焦点在它上面时，按回车键会换行。）注意，没有提交按钮的表单在按回 车键时不会提交。

以这种方式提交表单会在向服务器发送请求之前触发 submit 事件。这样就提供了一个验证表单数 据的机会，可以根据验证结果决定是否真的要提交。阻止这个事件的默认行为可以取消提交表单。例如， 下面的代码会阻止表单提交：     letform=document.getElementById("myForm");  form.addEventListener("submit", (event) => { // 阻止表单提交  event.preventDefault(); });

调用 preventDefault()方法可以阻止表单提交。通常，在表单数据无效以及不应该发送到服务 器时可以这样处理。

当然，也可以通过编程方式在 JavaScript 中调用 submit()方法来提交表单。可以在任何时候调用 这个方法来提交表单，而且表单中不存在提交按钮也不影响表单提交。下面是一个例子：

     let form = document.getElementById("myForm");

// 提交表单 

form.submit();

  通过 submit()提交表单时，submit 事件不会触发。因此在调用这个方法前要先做数据验证。

表单提交的一个最大的问题是可能会提交两次表单。如果提交表单之后没有什么反应，那么没有耐 心的用户可能会多次点击提交按钮。结果是很烦人的（因为服务器要处理重复的请求），甚至可能造成 损失（如果用户正在购物，则可能会多次下单）。解决这个问题主要有两种方式：在表单提交后禁用提 交按钮，或者通过 onsubmit 事件处理程序取消之后的表单提交