HTML5表单不直接获取数据，需用JavaScript读取value属性或FormData对象；推荐FormData一键采集，注意name属性必填且disabled字段被忽略。
HTML5 表单本身不“获取”数据，它只负责收集和结构化用户输入；真正获取数据要靠 JavaScript 读取表单控件的 value 属性或使用 FormData 对象。直接用 form.submit() 提交是传统方式，但现代前端几乎都用 JS 拦截后主动取值。
用 document.getElementById().value 直接取单个输入框值
最直白、适合简单场景（如登录页只有一个用户名+密码）。前提是每个 有唯一 id，且用户已输入内容。
注意：对 、 同样有效；但对复选框（）不能直接用 .value 判断是否选中，得看 .checked。
const username = document.getElementById('username').value;
const agree = document.getElementById('agree').checked;
用 form.elements 批量访问所有字段
比反复写 getElementById 更紧凑，尤其表单字段多时。它返回一个类似数组的对象，支持按 name 或索引访问。
立即学习“前端免费学习笔记（深入）”；
-
form.elements['email']→ 获取name="email"的第一个元素（支持重复 name，如多选 checkbox） -
form.elements[0]→ 获取第一个表单控件 - 对 checkbox/radio 组，
form.elements['hobby']返回 NodeList，需遍历判断.checked
const form = document.querySelector('form');
const email = form.elements['email'].value;
const hobbies = Array.from(form.elements['hobby'])
.filter(cb => cb.checked)
.map(cb => cb.value);
用 FormData 对象一键采集全部数据
最推荐的方式，尤其配合 fetch 提交。它自动处理文件上传、空值过滤、编码，并兼容所有表单控件类型（包括 file 和 date）。
注意：FormData 不会包含 disabled 字段；如果用 new FormData(form) 初始化，表单必须已渲染在 DOM 中（不能是纯字符串生成的）。
const form = document.querySelector('form');
const data = new FormData(form);
// 转为普通对象（可选）
const obj = Object.fromEntries(data.entries());
// 或直接用于 fetch
fetch('/api/submit', {
method: 'POST',
body: data // 不需要手动 set Content-Type，浏览器自动设为 multipart/form-data
});
监听 input 或 change 实时捕获输入
不是“获取提交数据”，而是做实时校验或联动。关键区别：input 在每次按键/粘贴后触发（含中文输入法未上屏时），change 只在失焦且值改变后触发。
- 中文输入场景下，用
input可能拿到不完整拼音，建议加防抖 -
change更适合 select、checkbox、radio 等离散操作 - 避免在
input回调里频繁调用form.elements.xxx.value，直接用事件对象的e.target.value
document.getElementById('search').addEventListener('input', e => {
clearTimeout(timer);
timer = setTimeout(() => {
console.log('搜索词：', e.target.value);
}, 300);
});
真正容易被忽略的是：表单控件的 name 属性——它不仅是 FormData 的键名，也是后端解析的依据；没写 name 的控件，无论有没有 id，都不会被 FormData 收集，也不会出现在 form.elements 中。
