提交表单~

.1 提交表单

表单是通过用户点击提交按钮或图片按钮的方式提交的。提交按钮可以使用 type 属性为"submit"

的<input>或<button>元素来定义，图片按钮可以使用 type 属性为"image"的<input>元素来定义。

点击下面例子中定义的所有按钮都可以提交它们所在的表单：

<!-- 通用提交按钮 -->

<input type="submit" value="Submit Form">

<!-- 自定义提交按钮 -->

<button type="submit">Submit Form</button>

<!-- 图片按钮 -->

<input type="image" src="graphic.gif">

如果表单中有上述任何一个按钮，且焦点在表单中某个控件上，则按回车键也可以提交表单。

（textarea 控件是个例外，当焦点在它上面时，按回车键会换行。）注意，没有提交按钮的表单在按回

车键时不会提交。

以这种方式提交表单会在向服务器发送请求之前触发 submit 事件。这样就提供了一个验证表单数

据的机会，可以根据验证结果决定是否真的要提交。阻止这个事件的默认行为可以取消提交表单。例如，

下面的代码会阻止表单提交：

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

form.addEventListener("submit", (event) => {

// 阻止表单提交

event.preventDefault();

});

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

器时可以这样处理。

当然，也可以通过编程方式在 JavaScript 中调用 submit()方法来提交表单。可以在任何时候调用

这个方法来提交表单，而且表单中不存在提交按钮也不影响表单提交。下面是一个例子：

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

提交表单 

form.submit();

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

表单提交的一个最大的问题是可能会提交两次表单。如果提交表单之后没有什么反应，那么没有耐

心的用户可能会多次点击提交按钮。结果是很烦人的（因为服务器要处理重复的请求），甚至可能造成

损失（如果用户正在购物，则可能会多次下单）。解决这个问题主要有两种方式：在表单提交后禁用提

交按钮，或者通过 onsubmit 事件处理程序取消之后的表单提交。

2、表单字段

表单元素可以像页面中的其他元素一样使用原生 DOM 方法来访问。此外，所有表单元素都是表单

elements 属性（元素集合）中包含的一个值。这个 elements 集合是一个有序列表，包含对表单中所

有字段的引用，包括所有<input>、<textarea>、<button>、<select>和<fieldset>元素。elements

集合中的每个字段都以它们在 HTML 标记中出现的次序保存，可以通过索引位置和 name 属性来访问。

以下是几个例子：

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

// 取得表单中的第一个字段

let field1 = form.elements[0];

// 取得表单中名为"textbox1"的字段

let field2 = form.elements["textbox1"];

// 取得字段的数量

let fieldCount = form.elements.length;