form.elements 返回表单内所有带 name 属性的可提交控件组成的 htmlcollection；包含 input、textarea、select、button、fieldset 等，支持索引和 name 访问，实时更新，比 queryselectorall 更精准轻量。
form.elements 是表单对象内置的只读属性，返回一个类似数组的 HTMLCollection，包含表单内所有可提交的表单控件（如 input、textarea、select、button、fieldset 等），无需逐个通过 ID 或 class 查询，特别适合批量操作或动态校验。
哪些元素会被包含在 elements 集合中
满足以下任一条件的元素才会被纳入：
- 具有 name 属性（且非空字符串）；
- 是表单的子元素（包括嵌套在 fieldset 内的控件）；
- 不是 disabled 状态（但即使禁用，仍会出现在 elements 中——只是不参与提交）。
注意：<input type="hidden">、<input type="image">、<output></output>（若在表单内且有 name）也会被包含；而 <input type="button">、<input type="reset">、<input type="submit"> 通常**不参与提交**，但只要带 name，依然会出现在 elements 中。
用索引或 name 快速获取单个控件
集合支持两种访问方式：
- 按数字索引：例如
form.elements[0]获取第一个控件； - 按
name属性：例如form.elements.username或form.elements["user-email"]—— 如果多个控件同名（如多选 checkbox），返回的是 NodeList（可用Array.from()转为数组处理）。
比 querySelector 更轻量，尤其适合已知 name 的场景，也避免了 ID 重复或未定义时的报错风险。
遍历所有控件并统一处理
直接用 for...of 或扩展运算符转数组：
const form = document.querySelector('#myForm');
for (const el of form.elements) {
if (el.name && ['text', 'email', 'tel'].includes(el.type)) {
el.addEventListener('input', validateField);
}
}
或批量清空值：
Array.from(form.elements).forEach(el => {
if ('value' in el) el.value = '';
if (el.type === 'checkbox' || el.type === 'radio') el.checked = false;
});
与 querySelectorAll 的关键区别
form.elements 只返回「可提交」的表单控件，自动过滤掉 div、span 等无关节点；querySelectorAll('input, select, textarea') 则需手动限定类型，还可能误选非本表单内的元素。此外，elements 是实时集合（反映 DOM 当前状态），而 querySelectorAll 返回静态快照。
