优秀的编程知识分享平台

网站首页 > 技术文章 正文

快速了解JavaScript的表单操作_用javascript制作表单

nanyue 2025-02-19 13:18:52 技术文章 4 ℃

前言

在 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 属性为表单的有序列表，包含表单中所有标签元素的引用，包括、