用document.getElementById通过ID获取表单元素并读取.value是最常用方式，注意ID需准确、DOM需加载完成、.value始终为字符串；提交时须用event.preventDefault()阻止刷新，并用FormData收集数据，校验失败应聚焦首个错误字段。
如何用 document.getElementById 获取表单元素值
直接通过 ID 拿到表单控件（比如 <input id="username">），再读取 .value 是最常用也最不容易出错的方式。注意：它只适用于有明确 id 的元素，且返回的是字符串（哪怕输入框类型是 number，.value 仍是字符串）。
常见错误：写错 ID 名字、ID 值含空格或特殊字符未转义、脚本执行时 DOM 还没加载完（建议放在 </body> 前或用 DOMContentLoaded 事件包裹）。
示例：
const username = document.getElementById('username').value;
const ageInput = document.getElementById('age');
const age = Number(ageInput.value); // 手动转数字更安全
监听 submit 事件并阻止默认提交行为
表单原生提交会刷新页面，绝大多数 JS 表单交互都需要先调用 event.preventDefault()。别漏掉这一步，否则看起来“什么都没发生”——其实是页面跳走了。
立即学习“Java免费学习笔记（深入）”；
使用场景包括：前端校验、AJAX 提交、动态展示结果等。
要点：
- 绑定事件的对象是
<form>元素，不是按钮 - 必须在事件回调里调用
event.preventDefault() - 可通过
event.target拿到当前提交的表单，方便复用
示例：
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault();
const data = new FormData(e.target);
console.log(Object.fromEntries(data)); // 转成普通对象查看
});
用 FormData 收集所有字段，兼容文件上传
FormData 是处理表单数据最健壮的方式，自动识别 name 属性、支持 <input type="file">、能正确处理多选框和复选框数组。
容易踩的坑：
- 表单控件必须有
name属性，否则FormData忽略它 -
<input type="checkbox">未勾选时不会出现在FormData中，不能靠“存在与否”判断是否为 false - 直接
console.log(formData)看不到内容，要用for...of或entries()
示例：
const form = document.querySelector('form');
const formData = new FormData(form);
for (let [key, value] of formData.entries()) {
console.log(key, value); // 文件对象也会正常输出
}
校验失败时聚焦第一个错误字段并提示
用户最反感的是提交后整页报错却不知从哪改起。聚焦（.focus()）第一个出错字段，配合 aria-invalid 和 aria-describedby，既提升体验也兼顾可访问性。
实操建议：
- 不要只靠
required属性做校验——它太弱，且样式难统一 - 校验逻辑写在
submit事件里，而不是每个blur或input实时触发（除非是密码强度等强反馈场景） - 对空值、邮箱格式、最小长度等做简单检查，复杂规则交给后端兜底
示例（聚焦首个空字段）：
const firstEmpty = form.querySelector('[required]:not([value]):not([type="hidden"])');
if (firstEmpty) {
firstEmpty.focus();
firstEmpty.setAttribute('aria-invalid', 'true');
}
表单交互真正麻烦的从来不是“怎么拿值”，而是状态同步、错误恢复、键盘操作支持（比如回车提交）、以及移动端软键盘收起后焦点丢失等问题——这些往往要结合具体框架或大量测试才能稳定下来。 
