JavaScript获取表单数据的常用方法

在浏览器中使用 JavaScript 获取表单数据，最常用的有四条路径：用 FormData 一次性采集整张表单、通过 form.elements 按字段名直接访问控件、用 querySelector / querySelectorAll 按选择器精确取值，以及监听 input / change 事件实时收集状态。整表提交通常优先选用 FormData，局部读取或实时联动则更适合后面几种方式。下文会用同一份示例表单，依次演示这四种写法的具体步骤、适用条件与容易踩坑的细节。

先准备一份演示表单与提交拦截

表单控件类型较多，只用单行文本框演示很容易遗漏多选和文件场景。下面先在 HTML 页面中准备一个包含文本、数字、单选、多选、下拉列表、多行文本、文件以及禁用输入框的标准 <form>，后续所有代码都直接基于这个结构运行。

<form id="profileForm">
  <label>用户名：<input type="text" name="username" value="zhangsan"></label><br>
  <label>年龄：<input type="number" name="age" value="28"></label><br>

  <div>
    角色：
    <label><input type="radio" name="role" value="editor" checked> 编辑</label>
    <label><input type="radio" name="role" value="viewer"> 访客</label>
  </div>

  <div>
    技能：
    <label><input type="checkbox" name="skills" value="js" checked> JavaScript</label>
    <label><input type="checkbox" name="skills" value="css" checked> CSS</label>
    <label><input type="checkbox" name="skills" value="html"> HTML</label>
  </div>

  <label>
    城市：
    <select name="city">
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option>
    </select>
  </label><br>

  <label>头像：<input type="file" name="avatar"></label><br>
  <label>状态（禁用）：<input type="text" name="status" value="active" disabled></label><br>
  <label>简介：<textarea name="bio">前端学习记录</textarea></label><br>

  <button type="submit">提交</button>
</form>

如果在点击“提交”按钮时用 JavaScript 读取数据，第一步需要在表单的 submit 事件中调用 event.preventDefault()。因为浏览器默认的提交行为会直接刷新或跳转页面，不阻止默认行为的话，脚本里的读取和异步请求还没来得及执行完，当前页面上下文就已经销毁了。

方法一：使用 FormData 一次性采集表单数据

当页面上已经存在 <form> 元素且各个控件都写了 name 属性时，FormData 是最省事的原生方案。只需要把表单 DOM 节点传给 new FormData(form)，浏览器就会按标准表单提交规则自动收集有效字段。

操作时常见的一个误区，是直接写 Object.fromEntries(new FormData(form))。对于单值字段这确实很方便，但像上面表单中的 skills 多选框有多个同名输入项时，Object.fromEntries 只会保留最后一项的值（本例中会丢掉 "js" 只剩 "css"）。更稳妥的做法是遍历键名并用 getAll() 处理多值字段：

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

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const formData = new FormData(form);

  // 如果需要转成普通 JS 对象，遇到重复键名时保留数组
  const result = {};
  for (const key of formData.keys()) {
    const values = formData.getAll(key);
    result[key] = values.length > 1 ? values : values[0];
  }

  console.log(result);
});

{
  username: "zhangsan",
  age: "28",
  role: "editor",
  skills: ["js", "css"],
  city: "shanghai",
  avatar: File { name: "", size: 0, type: "application/octet-stream" },
  bio: "前端学习记录"
}

从输出可以看出 FormData 的两个边界条件：第一，被设为 disabled 的 status 控件不会出现在结果里，因为浏览器规定禁用控件不参与表单提交；第二，如果 skills 只勾选了一个，上面代码里的 values.length > 1 判断会得到字符串而不是数组。如果后端要求 skills 始终是数组，可以把多选字段明确列出来单独用 formData.getAll('skills') 读取。

此外，如果接口接收的是文件上传（multipart/form-data），不需要手动转对象，直接把 formData 放进 fetch 的 body 即可，也不要手动设置 Content-Type 请求头，浏览器会自动补全分隔边界 boundary：

// 上传包含文件的表单时，直接传递 formData
fetch('/api/profile', {
  method: 'POST',
  body: formData
});

方法二：通过 form.elements 直接读取控件

FormData 拿到的是“提交快照”，但有时我们只需要读取其中一两个字段，或者需要读取被 disabled 的控件值、检查输入框的校验状态，这时通过 form.elements 访问具体控件节点更直接。

form.elements 返回的是包含表单内所有控件的集合（HTMLFormControlsCollection），既可以按索引读取，也可以直接通过控件的 name 或 id 属性访问。当存在多个同名控件（比如单选框或复选框组）时，form.elements['role'] 返回的是一个 RadioNodeList，它直接提供了 .value 属性来表示当前选中的单选值。

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

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const elements = form.elements;

  const data = {
    username: elements.username.value.trim(),
    age: elements.age.valueAsNumber, // 直接获取数字类型，空值时为 NaN
    role: elements.role.value,      // RadioNodeList 自动返回选中项的 value
    skills: Array.from(elements.skills)
      .filter((input) => input.checked)
      .map((input) => input.value),
    city: elements.city.value,
    status: elements.status.value,  // 可以读到 disabled 控件的值
    avatarFile: elements.avatar.files[0] || null
  };

  console.log(data);
});

方法三：用 querySelector / querySelectorAll 按选择器获取

实际开发中，输入框未必都包裹在 <form> 标签里，比如弹窗里的筛选条、表格行内编辑框，或者只想获取页面局部区域被勾选的条目。这时可以直接使用 querySelector 和 querySelectorAll。

针对单选框和多选框，CSS 伪类 :checked 非常实用。它能只筛选出当前处于选中状态的节点，省去自己写 if (input.checked) 过滤的步骤。如果是普通文本或下拉框，直接定位元素再读 .value 即可。

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

// 1. 获取文本框的值
const username = form.querySelector('input[name="username"]')?.value ?? '';

// 2. 获取单选框当前选中的值（若未选任何项，结果为 undefined）
const role = form.querySelector('input[name="role"]:checked')?.value;

// 3. 获取多选框所有选中的值，转为数组
const skills = Array.from(
  form.querySelectorAll('input[name="skills"]:checked'),
  (el) => el.value
);

// 4. 若有多选下拉框 <select name="tags" multiple>，读取全部选中项
const selectedCities = Array.from(
  form.querySelector('select[name="city"]').selectedOptions,
  (option) => option.value
);

console.log({ username, role, skills, selectedCities });

使用选择器逐个读取时，多选框和单选框最容易出现的错误，是不加 :checked 就直接读取 el.value。在 HTML 规范中，即便复选框没有被勾选，它的 .value 依然会返回属性里写的值（若未写 value 属性，甚至会默认返回字符串 "on"），因此必须结合 :checked 选择器或检查 el.checked === true。

方法四：监听 input / change 事件实时获取数据

并非所有表单都要等到用户点“提交”才去读值。像搜索建议、密码强度提示、字数统计，或者根据选项动态启用/禁用提交按钮，都需要在用户操作过程中实时获取最新数据。

实时监听主要用到两个事件，适用控件有所不同：input 事件会在输入内容每变化一个字符时立即触发，适合 <input type="text">、<textarea> 这类连续输入控件；change 事件在控件失去焦点或选项确认变更后触发，适合 <select>、radio、checkbox 和 file 控件。利用事件冒泡，把监听器统一绑在 <form> 上（事件委托），就能用很少的代码持续同步整份表单的状态。

const form = document.getElementById('profileForm');
const draftState = {
  username: form.elements.username.value,
  role: form.elements.role.value,
  skills: ['js', 'css']
};

function handleFieldUpdate(event) {
  const target = event.target;
  if (!target.name) return;

  if (target.type === 'checkbox') {
    draftState[target.name] = Array.from(form.elements[target.name])
      .filter((el) => el.checked)
      .map((el) => el.value);
  } else if (target.type === 'file') {
    draftState[target.name] = target.files[0] || null;
  } else {
    draftState[target.name] = target.value;
  }

  console.log('实时状态已更新：', draftState);
}

// 文本输入即时触发，选项和文件切换时触发
form.addEventListener('input', handleFieldUpdate);
form.addEventListener('change', handleFieldUpdate);

由于 <select> 和复选框在部分浏览器中同时会触发 input 与 change，如果上面的 handleFieldUpdate 里包含网络请求（比如边输入边请求搜索接口），需要给 input 处理加上防抖（debounce），并避免同一动作触发两次请求。

常见排查问题与选型总结

在实际编写表单取值逻辑时，除了多选框和禁用项的差异，还有几个高频遇到的问题值得提前核对：

• 为什么点击按钮没有打印日志，页面直接刷新了？检查按钮是否放在 <form> 内且未声明 type="button"。没有写 type 属性的 <button> 默认就是 submit 类型；如果只是触发局部读取而不是提交表单，应加上 type="button"，或者在 submit 监听里调用 event.preventDefault()。
• 只读字段需要一起提交怎么办？disabled 控件会被 FormData 忽略，如果希望页面上不可修改但提交时仍携带该值，应改用 readonly 属性（注意 readonly 只对输入类控件有效，对下拉框和单选复选框无效），或通过 <input type="hidden"> 传递。
• 数字输入框拿到的还是字符串怎么办？无论是 input.value 还是 FormData.get()，返回的都是字符串。需要做数值计算或传数字型 JSON 字段时，读取 DOM 可用 input.valueAsNumber，处理 FormData 时可用 Number(raw) 并先判断原字符串非空且结果不是 NaN（空字符串直接传给 Number('') 会变成 0）。
• 为什么复选框全部取消勾选后，提交对象里少了这个字段？这是 FormData 的标准行为——未勾选的复选框不会生成键值对。如果后端接口要求必须存在 skills: [] 或布尔字段 agree: false，需要在组装最终对象时主动补上默认值。

总结来看，围绕一个标准的 <form> 提交数据，new FormData(form) 配合 getAll() 可以覆盖绝大多数后端传参和文件上传需求；当需要对某个控件做精细读取、校验或保留禁用字段时，切回 form.elements；若输入元素分散在没有 <form> 的区域或需要随时响应用户交互，则分别交给选择器查询和 input/change 事件监听。