最可靠方式是使用浏览器原生的form.elements和formdata：前者按html顺序返回所有可提交控件并跳过disabled项，后者自动处理name校验、文件封装及真实提交逻辑。
直接用 DOM API 读取表单值最可靠
浏览器原生的 form.elements 和 form.querySelector 是解析页面表单数据的第一选择，不依赖第三方库，兼容性好，且能准确反映用户当前输入状态（包括被 JavaScript 动态修改过的值）。request.form 这类后端对象只在服务端存在，不能用于前端 HTML 解析。
常见错误是用 innerHTML 或正则去提取 value 属性值——这只能拿到初始 HTML 中写的默认值，完全忽略用户已输入的内容或 JS 修改后的状态。
- 用
form.elements['username'].value获取文本框当前值（不是getAttribute('value')） - 单选/复选框必须检查
checked属性，而不是读value -
select元素要读selectedOptions[0]?.value，不是value属性本身（后者可能为空）
用 FormData 构造器批量采集更安全
当表单含文件上传、多组同名字段（如多个 type="checkbox"）、或需要严格遵循浏览器提交逻辑时，FormData 是唯一能复现真实提交行为的方式。它自动处理 disabled 字段跳过、name 为空字段忽略、文件 Blob 封装等细节。
容易踩的坑：直接遍历 form.querySelectorAll('input') 并手动拼对象，会漏掉 textarea、select，也搞不定 radio 组的互斥逻辑。
- 构造：
const fd = new FormData(formElement)，传入<form></form>DOM 节点 - 转为对象（需自行处理重复键）：
Object.fromEntries(fd.entries())仅适用于无重复 name 的场景 - 含文件时，必须用
fd.get('fileInput')或遍历fd.values()，不能强转 JSON
解析嵌套表单或动态渲染内容要等 DOM 稳定
很多页面的表单是 JS 异步插入（如 SPA 路由切换后加载）、或包裹在 Shadow DOM / Web Component 内。此时直接 document.querySelector('form') 可能返回 null，或取不到子元素。
WebKit 渲染引擎（Safari）和 Chromium（Chrome）对 form.elements 的初始化时机基本一致，但若表单由框架（React/Vue）控制，必须等框架完成挂载。盲目加 setTimeout 不可靠。
- 监听
DOMContentLoaded不够，要等框架的mounted或useEffect阶段 - Shadow DOM 内的表单需用
shadowRoot.querySelector('form')，不能从全局 document 查 - 用
MutationObserver监听form节点插入比轮询更精准
避免用正则或字符串匹配解析表单结构
HTML 不是正则友好型语言，尤其表单中常见未闭合标签、属性值含引号嵌套、注释干扰等情况。例如 <input name="q" value='a"b'> 会让简单正则直接断裂；<form><div>
<input> 这类非法嵌套，浏览器会自动修复成 <code><form>
<div></div>
<input>
</form>，但正则无法模拟该修复逻辑。
DOM 解析器（如浏览器内置或 DOMParser）才是正确入口。即使只是服务端解析静态 HTML，也应优先用 cheerio（Node.js）或 lxml（Python），而非手写正则。
-
DOMParser示例：const doc = new DOMParser().parseFromString(htmlStr, 'text/html') - 之后仍要用
doc.querySelector('form')+elements，不要回退到字符串操作 - 服务端环境没有
FormData，但cheerio的$('form').serialize()可模拟其编码逻辑
disabled）、readonly 属性影响、以及 name 属性缺失导致字段被静默丢弃**——这些都不会报错，但数据就没了。
