JavaScript 提交带有 ID 的表单

在 Web 开发中，表单是经常使用的元素，而 JavaScript 可以用于处理表单的提交（submit）事件。本文将介绍如何使用 JavaScript 提交带有 ID 的表单。

HTML 表单代码

在 HTML 中，创建一个带有 ID 的表单可以使用如下代码：

<form id="myForm" action="" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  
  <button type="submit">提交</button>
</form>

在上述代码中，表单使用了 id 属性来标识，其值为 myForm。表单中包括了两个控件，分别是用户名和密码的输入框，以及一个提交按钮。

JavaScript 代码

为了能够使用 JavaScript 处理表单，我们需要获取到表单的 DOM 对象。在此之前，我们需要先了解 document.getElementById() 方法，它可以用于查找指定 ID 的 HTML 元素。

有了上述知识后，我们可以编写如下 JavaScript 代码：

const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  
  const username = form.elements['username'].value;
  const password = form.elements['password'].value;
  
  // 进行表单校验和提交处理...
});

在上述代码中，我们使用 document.getElementById() 方法获取表单的 DOM 对象，然后使用 addEventListener() 方法为 submit 事件添加一个监听器，该监听器使用了一些核心代码：

• event.preventDefault() 方法可以阻止表单的默认提交行为；
• form.elements 代表表单中的控件元素列表，我们可以使用类似 form.elements['username'] 的方式获取指定的控件，然后使用 value 属性获取到用户输入的值。

在上述代码中，我们可以进一步处理用户输入的值，比如进行表单校验、提交表单数据等等。

代码片段

下面是完整的 JavaScript 代码片段：

const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  
  const username = form.elements['username'].value;
  const password = form.elements['password'].value;
  
  // 进行表单校验和提交处理...
});

结论

本文介绍了使用 JavaScript 提交带有 ID 的表单的方法，并提供了完整的代码片段。开发者可以根据自己的需要修改和扩展代码，以实现更加丰富的表单交互效果。