前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库FormData(form) 收集数据 禁用控件处理
HTML表单与输入

new FormData(form) 会收集哪些字段?

new FormData(form) 收集该表单的成功控件,不是机械遍历所有后代节点。具名且启用的输入通常会进入结果,禁用控件和未勾选复选框不会;表单外通过 form 关联的控件也可能被收集。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#表单与输入#表单
先看核心答案读代码示例
理解线索

数据项进入集合的条件

  1. 归属控件关联目标表单
  2. 名称通常需要 name 才有键
  3. 状态禁用与未选中状态会影响结果

只传表单参数时通常不包含某个提交按钮的名称和值;需要时可使用提交者参数。

核心回答

先记住这个答案

new FormData(form) 根据 HTML 表单的成功控件规则生成数据项。它不仅看 <form> 标签里的节点,也看真正归属该表单的外部控件;同时跳过禁用输入、没有适用名称的控件以及未勾选的复选框。同名字段可以产生多个值,因此读取全部值时用 getAll() 而不是只用 get()。

  • 收集依据是表单归属与成功控件规则
  • 禁用控件不会进入数据
  • 未勾选复选框通常没有数据项
  • 同名字段可产生多个值

哪些控件会出现

做筛选表单时,两个同名复选框都勾选了,就会生成两条同名数据。没有勾选的复选框不会生成 false 字符串。文件输入可能生成文件对象,不能把所有数据项都假设成纯文本。表单外的控件若用 form 关联也可能进入结果。

检查同名选项HTML
<form id="filters">
  <label><input type="checkbox" name="tag" value="js" checked>JS</label>
  <label><input type="checkbox" name="tag" value="css" checked>CSS</label>
  <input name="internal" value="skip" disabled>
</form>

以此构造数据时,getAll("tag") 可得到两个标签值;internal 因禁用而不出现。若业务需要明确发送“未选中”,应由应用构造相应字段,不能指望普通复选框自动产生 false。

构造数据不等于提交表单

new FormData(form) 只在内存里构造数据,不会自动导航或发请求。随后可以交给 fetch,也可以追加字段。若要模拟某个提交按钮的名称和值,可使用支持提交者参数的构造形式,传入目标按钮。

它也不应被当成绕过服务端验证的工具。用户可自行构造 HTTP 请求;服务端仍需校验每个字段。用 FormData 发送文件时,让浏览器设置带边界的 Content-Type,不要只手写一个没有 boundary 的 multipart 类型。

调试时可以在控制台运行 Array.from(new FormData(form).entries()),直接看到发送前有哪些键值对;同名复选框会出现多次。还要区分“是否在表单里”和“是否属于表单”:控件可以通过 form 属性归属到外部表单,反过来即使视觉上在表单内部,也可能归属别的表单。文件输入的值是 File 对象,不是文件路径字符串。一个未选择文件的文件输入也有特定的空文件提交规则,不能用 input.value 判断整份表单是否包含文件数据。

回答前,多想一步

容易答错的地方

认为表单内所有输入都会出现
禁用、未勾选、无 name 等情况会缺席;表单外关联控件也可能出现。
用 get() 读取所有同名复选框
get() 只取一项;要读取多个同名值应使用 getAll()。
试着用自己的话回答

面试官还会怎么问?

提交按钮本身会被默认收集吗?

只传 form 构造时通常没有具体提交者;需要该按钮值时可使用带提交者的构造方式。

未勾选复选框会得到 false 吗?

不会,普通表单数据中通常没有这个字段项。

创建 FormData 会触发校验吗?

构造数据不等于执行原生提交;是否调用校验取决于具体流程。

从一道题,走向一组知识

把知识连起来

表单与输入

一个提交按钮怎样覆盖表单的 method 和 action?

formmethod 可以由具体提交按钮覆盖,但数据构造与发送动作仍是两回事。

表单与输入

保存草稿时,formnovalidate 会跳过哪些校验?

formnovalidate 改变提交流程校验,不会让禁用控件自动进入 FormData。

参考资料

  • HTML:表单与输入参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 哪些控件会出现
  3. 构造数据不等于提交表单
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑