JavaScript 中怎么获取表单中所有输入框的值-js教程-PHP中文网

可通过遍历form.elements或使用formdata获取表单值：前者需手动处理disabled、checked及multiple；后者更简洁，天然遵循提交规则，但同名字段需手动聚合为数组。

javascript 中怎么获取表单中所有输入框的值

可以通过遍历表单内所有 <input>、<textarea></textarea> 和 <select></select> 元素，提取它们的 value 属性来获取所有输入框的值。关键在于正确选择元素、区分控件类型，并处理禁用（disabled）或未选中（如 checkbox/radio）的情况。

使用 `form.elements` 遍历原生表单元素

form.elements 是一个只读的 HTMLFormControlsCollection，包含表单内所有可提交的控件（input、textarea、select、button），比 querySelectorAll 更语义化且自动排除非表单控件：

遍历时跳过 disabled 元素（它们不会提交，通常也不应计入）
对 checkbox 和 radio，只取 checked === true 的值
对 select[multiple]，需用 selectedOptions 获取多个选中项

示例代码：

const form = document.querySelector('#myForm');
const values = {};

for (const el of form.elements) {
  if (!el.name || el.disabled) continue;

  const { name, type, value } = el;

  if (type === 'checkbox' || type === 'radio') {
    if (!el.checked) continue;
    values[name] = value;
  }
  else if (type === 'select-multiple') {
    values[name] = Array.from(el.selectedOptions).map(opt => opt.value);
  }
  else {
    values[name] = value;
  }
}
console.log(values); // { username: "admin", agree: "on", tags: ["js", "web"] }

用 `FormData` 快速获取键值对（推荐用于提交场景）

如果目标是获取可直接提交的数据（例如发给后端），FormData 是最简洁可靠的方式，它天然遵循表单提交规则（忽略 disabled、只取 checked、支持文件、自动处理多选）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

构造 new FormData(form) 即可捕获当前有效值
用 Object.fromEntries(new FormData(form)) 转为普通对象（注意：多选 select 或多个同名 checkbox 会被最后一个覆盖）
如需保留数组形式，手动遍历 FormData 实例：

const formData = new FormData(form);
const values = {};

for (const [name, val] of formData.entries()) {
  if (!values[name]) {
    values[name] = val;
  } else if (Array.isArray(values[name])) {
    values[name].push(val);
  } else {
    values[name] = [values[name], val];
  }
}