快速了解JavaScript的表单操作
前言
在 HTML 中使用 表单元素在 JavaScript 中对应的是 HTMLFormElement 类型，而HTMLFormElement继承了HTMLElement接口：
interface HTMLFormElement extends HTMLElement {
...
}因此，
HTMLFormElement 除了与 HTMLElement有一样的属性和方法外，还有自己独有的属性和方法：acceptCharset：服务器可以接收的字符集，等价于 HTML 的 accept-charset 属性。action：请求的 URL，等价于 HTML 的action属性。elements：表单中所有控件的HTMLCollection。enctype：请求的编码类型，等价于 HTML 的 enctype 属性。length：表单中控件的数量。method：HTTP 请求的方法类型，通常是get或post，等价于 HTML 的method属性。name：表单的名字，等价于 HTML 的name属性。target：用于发送请求和接收响应的窗口的名字，等价于 HTML 的target属性。reset()：把表单字段重置为各自的默认值，如果没有默认值，则为空。submit()：提交表单。
DOM 选择器进行查找，如 getElementById/getElementsByName/getElementsByClassName/getElementsByTagName/querySelector/querySelectorAll 这些方法，下面使用 getElementById() 方法获取表单，只要给表单设置一个 id 属性即可：let form = document.getElementById("form-id");
Document中的document.forms的成员，因此可以通过索引或表单的 name 来访问特定的表单。如下所示：// 文档中第一个元素
let firstForm = document.forms[0];
// 取得名字为"form-name"的表单
let formName = document.forms["form-name"];
注意：表单可以同时拥有
id和name，且两者可以不相同。提交表单 一般情况下，
- 定义使用
type=“submit”属性值的元素，如。 - 定义使用
type="submit"属性值的元素，如。 - 定义使用
type="image"属性值的元素，如。
submit 事件。这就提供了一个验证表单数据的机会，可以根据验证结果来决定表单是否要提交。如下所示：let form = document.getElementById("form-id");
form.addEventListener("submit", (event) => {
// 验证表单
if (...) {
// 验证失败后，就要阻止表单提交
event.preventDefault();
return;
}
// 这里用于验证成功后将表单提交
});
调用
preventDefault() 方法可以阻止表单提交。通常，在表单数据无效以及不应该发送到服务器可以这样处理。也可以调用
submit() 方法提交表单，表单中不存在提交按钮也不影响提交。如下所示：let form = document.querySelector("#form-id");
// 提交表单
form.submit();
通过
submit() 方法提交的表单，submit 事件不会触发。因此在调用这个方法前要先做数据验证。表单提交的最大一个问题是可能会提交两次。如果提交表单后没有反应，那么没有耐心的用户可能会多次点击提交按钮。因此，解决这种方法主要有两种：表单提交后禁用按钮，或者通过
onsubmit 事件取消之后的表单提交。重置表单 一般用户填写完表单信息后，想要重新填写时，可以使用重置按钮来重置表单。而定义重置按钮主要有：
- 定义使用
type="reset"属性值的元素，如。 - 定义使用
type="reset"属性值的元素，如
重置按钮可以触发
reset 事件。这个事件为取消重置提供了机会。如下所示：let form = document.getElementById("form-id");
form.addEventListener("reset", (event) => {
event.preventDefault();
});
重置按钮也可以调用
reset() 方法完成重置操作：let form = document.getElementById("form-id");
// 重置表单
form.reset();
但
reset()方法会触发 reset 事件 。注意：表单设计中通常不提倡重置表单。
表单字段 表单元素可以像页面中的其它元素一样使用原生
DOM 方法来访问。此外，调用 elements 属性为表单的有序列表，包含表单中所有标签元素的引用，包括