JavaScript 表单

在本教程中，我们将学习、讨论和理解 JavaScript 表单。我们还将了解 JavaScript 表单在不同场景下的实现。

在这里，我们将学习如何访问表单、获取 JavaScript 表单的值，以及如何提交表单。

表单简介

表单是 HTML 的基础。我们使用 HTML form 元素来创建 JavaScript 表单。要创建表单，我们可以使用以下示例代码：

在代码中：

• form name 标签用于定义表单的名称。这里的表单名称是“Login_form”。在 JavaScript 表单中将引用此名称。
• action 标签定义了提交表单时浏览器将执行的操作。这里我们没有设置任何操作。
• 采取行动的方法可以是 post 或 get，当表单需要提交到服务器时使用。这两种方法都有各自的属性和规则。
• input type 标签定义了我们希望在表单中创建的输入类型。这里我们使用了 type 为“text”的输入，这意味着我们将在文本框中输入文本值。
• 接下来，我们使用了 type 为“password”的输入，输入的值将是密码。
• 接下来，我们使用了 type 为“button”的输入，点击时，我们将获取表单的值并显示出来。

除了 action 和 method，HTML Form Element 还提供了以下有用的方法：

• submit (): 此方法用于提交表单。
• reset (): 此方法用于重置表单的值。

引用表单

现在，我们已经使用 HTML 创建了表单元素，但还需要将其连接到 JavaScript。为此，我们使用 getElementById () 方法将 HTML 表单元素引用到 JavaScript 代码。

使用 getElementById() 方法的语法如下：

使用 ID，我们可以进行引用。

提交表单

接下来，我们需要通过提交其值来提交表单，为此我们使用 onSubmit() 方法。通常，为了提交，我们使用一个提交按钮，该按钮提交在表单中输入的值。

submit() 方法的语法如下：

当我们提交表单时，在请求发送到服务器之前会执行该操作。它允许我们添加一个事件监听器，使我们能够对表单进行各种验证。最后，表单将通过 HTML 和 JavaScript 代码的组合完成。

让我们收集并使用所有这些来创建一个 登录表单 和 注册表单，并同时使用它们。

登录表单

点击登录按钮后，上述代码的输出如下所示：

注册表单

上述代码的输出如下所示

这样，我们就可以创建带有适当验证的 JavaScript 表单。