关键是在submit事件中用queryselector按name或id定位input并取.value，需preventdefault防止刷新，值为字符串需手动转换类型。
直接用 querySelector 获取 input 值，关键不是“选中”，而是“选中后读取 .value”。表单提交时提取值，核心是监听 submit 事件，在事件处理函数里用 querySelector 找到对应 input 元素，再取它的 .value。
用 name 或 id 快速定位 input
给 input 设置 name 或 id 属性，是最稳妥的查找方式：
-
document.querySelector('input[name="username"]')—— 按 name 查找（推荐，语义清晰） -
document.querySelector('#email')—— 按 id 查找（唯一性强，速度快） - 避免只用
input标签名，容易误取到隐藏域、按钮等其他 input
在 submit 事件里取值，别忘了 preventDefault
表单默认会跳转或刷新页面，必须调用 event.preventDefault() 阻止它，才能安全读取值：
form.addEventListener('submit', function(e) {
e.preventDefault(); // 关键！否则页面刷新，取不到值
const username = document.querySelector('input[name="username"]').value;
const email = document.querySelector('input[name="email"]').value;
console.log(username, email);
});
批量提取多个 input 的值（简洁写法）
如果表单字段多，可以用对象解构 + querySelectorAll 配合 Array.from：
const formData = {};
['username', 'email', 'age'].forEach(name => {
const el = document.querySelector(`input[name="${name}"]`);
if (el) formData[name] = el.value.trim();
});
或者更紧凑地写成：
const values = Object.fromEntries(
Array.from(document.querySelectorAll('input[name]'))
.filter(el => el.name)
.map(el => [el.name, el.value.trim()])
);
注意空值和类型转换
input 的 .value 永远是字符串，数字/布尔等需手动转换：
- 数字：用
parseInt(input.value)或Number(input.value) - 布尔（如 checkbox）：用
checkbox.checked，不是.value - 空值判断建议用
input.value.trim() === ''，避免空格干扰
