form.elements 是获取表单所有可提交控件最可靠方式，返回 htmlformcontrolscollection，仅包含带 name 属性的 input、select、textarea、button 等，支持索引和 name 访问，但同名多控件时 name 访问只返首个；需手动过滤 disabled 并按类型（checkbox/radio 用 checked、select multiple 用 selectedoptions）读取真实值。
用 form.elements 一次性拿到所有表单控件
直接访问表单元素集合最可靠的方式是通过 elements 属性，它返回一个 HTMLFormControlsCollection（类数组），包含所有可提交的子控件（input、select、textarea、button 等），自动过滤掉 fieldset、label 这类非控件节点。
注意：只有设置了 name 属性的控件才会被纳入该集合；没有 name 的 input（比如纯 UI 用的搜索框）会被忽略。
- 获取方式：
document.querySelector('form').elements或事件回调里的event.target.elements - 遍历时建议转成真数组：
Array.from(form.elements)，方便用filter、map等方法 - 支持按索引（
elements[0]）和name（elements['username']）两种方式取值，但同名多个控件（如多选 checkbox）时，elements['hobby']返回的是第一个匹配项，不是全部
区分 value 和实际用户输入状态
单纯读 element.value 不一定反映当前界面状态——比如 input[type="checkbox"] 或 radio 必须检查 checked 属性，select[multiple] 需要遍历 selectedOptions，而禁用（disabled）控件的 value 仍可读取，但不会随表单提交。
-
checkbox/radio：用el.checked判断是否选中，不要只看value -
select单选：直接读el.value可行；多选：必须用Array.from(el.selectedOptions).map(opt => opt.value) - 带
disabled的控件：其value仍存在，但不属于有效表单数据，建议提前过滤掉el.disabled === false的项
避免用 querySelectorAll('input, select, textarea') 全局抓取
这种方式看似直观，但容易误抓非本表单控件（比如页面其他位置的独立 input），也抓不到 button（虽不提交，但属于表单控件），更无法识别 fieldset 内嵌结构中的逻辑归属。
- 若表单有嵌套
fieldset，form.elements仍能正确收集其内部控件；而querySelectorAll需手动限定作用域（如form.querySelectorAll(...)），且仍可能漏掉image类型按钮等边缘情况 -
form.elements自动排除disabled控件？不，它不会过滤，只是“存在”；真正提交时浏览器才忽略disabled，所以你做 JS 收集时得自己判断 - 动态增删控件后，
form.elements是实时更新的，无需重新查询
提交前校验时别忘了 type="hidden" 和 type="submit"
隐藏域（input[type="hidden"]）常被用来传 token 或状态，它有 name 和 value，会出现在 elements 中，也参与提交；而 submit 按钮本身也有 name 和 value，点击时它的值也会作为字段提交——这点常被忽略，导致后端收到意外字段。
- 调试时可快速打印所有有效字段：
Array.from(form.elements).filter(el => el.name && !el.disabled).map(el => [el.name, el.type === 'checkbox' || el.type === 'radio' ? el.checked : el.value]) - 如果用了自定义提交逻辑（比如
fetch替代原生提交），务必确认是否需要排除type="submit"或type="button" -
form.elements包含button元素，但只有type="submit"/type="image"才会在原生提交中发送值
disabled 控件的显式过滤。别假设所有控件都靠 .value 就能读对。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
