如何用document.forms快速访问表单中的所有输入控件数据-js教程-PHP中文网

document.forms本身不直接提供所有输入控件数据，需通过form.elements遍历或formdata提取；定位表单必须用name属性（非id）或索引，且需注意disabled、同名多控件等细节。

如何用document.forms快速访问表单中的所有输入控件数据

document.forms 本身不直接提供“所有输入控件数据”，它只返回表单元素集合；真正批量读取值，必须配合 form.elements 遍历或 FormData 提取——这是最常被跳过的关键前提。

用 `document.forms[name]` 或 `document.forms[index]` 定位表单对象

必须先拿到表单 DOM 对象，才能访问其 elements。两种方式等效但适用场景不同：

document.forms["myForm"]：要求表单有 name="myForm" 属性（id 不行）；name 属性缺失时返回 undefined
document.forms[0]：按页面中出现顺序取第一个 <form></form>，适合单表单页，但多表单时易错位
常见错误：document.forms["myForm"].elements 报 Cannot read property 'elements' of undefined，90% 是因为写错了 name 值，或用了 id 当 name

遍历 `form.elements` 读取每个控件的 `value`

form.elements 是实时 HTMLCollection，包含所有带 name 的可提交控件（input、select、textarea 等），但注意：

type="submit"、type="reset"、type="button" 即使有 name 也会出现在 elements 中，但它们的 value 通常不是用户输入数据——需要手动过滤
disabled 元素仍会出现在 elements 中，但 .value 可能为空或旧值；若要跳过禁用项，需加判断：if (!el.disabled)
同名多选（如 checkbox 组）时，form.elements["hobbies"] 返回 NodeList，不能直接读 .value，得用 Array.from(el).filter(i => i.checked).map(i => i.value)

简单遍历示例：

const form = document.forms["signup"];
for (let i = 0; i 

<h3>更稳妥的替代方案：<code>new FormData(form)</code>
</h3>
<p>如果目标是获取「实际可提交的数据」，<code>FormData</code> 比手撸遍历更可靠：</p>

自动排除 disabled 元素、type="button" 类按钮、无 name 的控件
天然支持文件上传字段（<input type="file">），而 elements[i].value 对文件输入始终是空字符串
对 checkbox/radio 组，只返回已选中的项；对多选 select，返回全部选中值
兼容性好（IE10+），但注意：构造时必须传入真实 <form></form> 元素，不能传 form.elements

使用示例：

const form = document.forms["signup"];
const fd = new FormData(form);
for (const [key, value] of fd.entries()) {
  console.log(key, value); // key 是 name，value 是对应值（文件对象或字符串）
}

为什么不用 `querySelectorAll("input[name], select[name], textarea[name]")`？

它看起来更直观，但有几个硬伤：

漏掉 <fieldset></fieldset> 内嵌的控件（虽然少见，但合法）
无法识别 <output></output>（若在表单内且有 name）和 type="hidden" 的语义归属
不反映表单结构关系：比如某个 input 在 DOM 中位于表单外但通过 form="xxx" 关联，querySelectorAll 会抓到它，但 form.elements 不会——后者才代表“该表单真正拥有的控件”
性能略低：每次调用都触发样式计算和 DOM 查询，而 form.elements 是原生属性，零开销