在 JavaScript 中获取表单

表单是网页上常见的用户输入界面，JavaScript 可以用来获取表单中的数据。本文将介绍在 JavaScript 中获取表单的各种方法和技巧。

获取表单元素

获取表单元素有多种方法，例如：

• 通过 ID 获取表单元素：

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

• 通过元素名称获取表单元素：

  const inputElements = document.getElementsByName('input-name');
  

• 通过标签名获取表单元素：

  const selectElement = document.getElementsByTagName('select')[0];
  

• 通过 CSS 选择器获取表单元素：

  const buttonElement = document.querySelector('#my-form button[type="submit"]');
  

获取表单数据

获取表单数据的方法取决于表单的类型和用户的输入。以下是可行的方法：

• 对于单选框和复选框：

  const checkboxElement = document.getElementById('checkbox-id');
  const isChecked = checkboxElement.checked;
  

• 对于文本框和文本区域：

  const inputElement = document.getElementById('input-id');
  const value = inputElement.value;
  

• 对于下拉列表：

  const selectElement = document.getElementById('select-id');
  const value = selectElement.value;
  

• 对于文件上传：

  const fileElement = document.getElementById('file-id');
  const files = fileElement.files;
  

• 对于多个输入元素：

  const formData = new FormData(myForm);
  // 调用 get(name) 方法获取单个数据项：
  const username = formData.get('username');
  // 或者使用 forEach 方法遍历所有表单数据：
  formData.forEach((value, key) => console.log(key, value));
  

处理表单提交事件

处理表单提交事件通常需要阻止默认行为（避免页面跳转）并执行一些自定义逻辑，例如：

const myForm = document.getElementById('my-form');
myForm.addEventListener('submit', event => {
  event.preventDefault(); // 阻止默认行为
  // 等价于传统的 form.submit()，不过这里可以自定义逻辑：
  // myForm.submit();
});

总结

本文介绍了在 JavaScript 中获取表单元素和数据的基本方法，以及处理表单提交事件的常见逻辑。在实践中，还有更多的细节需要注意，例如表单验证和错误处理。如果您对此感兴趣，可以查看相关资源进行深入学习。