form.elements 是最轻量、标准且语义清晰的表单控件访问方式，返回实时 HTMLFormControlsCollection，仅包含带 name 属性的可提交控件，需注意 name 命名规范、访问方式选择及同名多控件处理。
直接用 form.elements 是最轻量、标准且语义清晰的方式，它返回一个实时的 HTMLFormControlsCollection（类数组对象），只包含表单内所有带 name 属性的可提交控件，无需反复调用 querySelector，也不触发重排。
确保控件有 name 属性才有效
只有设置了 name 的控件才会出现在 elements 中——id 或 class 无效。常见遗漏点：
-
✅ 可访问；❌ 不在集合里 - 复选框组应共用 name：
、 - 避免 name 含点号、空格或特殊字符，如
user.name会导致form.elements.user.name解析错误，建议用userName或user-name
三种常用访问方式
拿到 form.elements 后，按需选择最合适的取值方式：
-
按 name 直接取（最常用）：
form.elements.username或form.elements["email"]（后者支持动态变量和特殊字符） -
按索引遍历全部：
form.elements[0]、form.elements[1]，配合.length使用：for (let i = 0; i -
用 namedItem() 避免属性冲突：当控件 name 和内置属性同名（如
name="length"或name="submit"）时，form.elements.length会返回集合长度而非控件，此时必须用form.elements.namedItem("length")
遍历时要过滤无效项
form.elements 包含所有带 name 的控件，但并非所有都代表用户输入数据：
- 跳过
disabled元素：if (!el.disabled) - 排除按钮类控件：
!["submit", "reset", "button"].includes(el.type) - 对
checkbox和radio，必须先判断el.checked再读el.value - 文本类（
text、email、textarea等）可直接取el.value；select-multiple需用el.selectedOptions提取多个值
处理同名多控件（如复选框组）
同名控件（例如多个 name="tag" 的 checkbox）会返回 NodeList，不能直接读 .value：
- 复选框组：用
Array.from(form.elements.tags).filter(t => t.checked).map(t => t.value)得到选中值数组 - 单选组：用
Array.from(form.elements.gender).find(r => r.checked)?.value获取唯一选中值 - 错误写法：
form.elements.tags.value→ 返回undefined或第一个元素的值，不可靠
