直接用form提交会跳转页面是浏览器默认行为，需用event.preventdefault()阻止；应使用formdata获取所有字段值，注意多选checkbox需用data.getall()；输出用格式化json写入可全选的textarea；文件字段仅本地预览并提示信息。
为什么直接用 form 元素提交会跳转页面？
因为浏览器默认把 submit 当作“提交给后端”，哪怕没写 action，也会刷新当前页或报 404。这不是 bug，是规范行为。
要让它“只测前端逻辑”，必须阻止默认提交动作：
- 在
form的onsubmit里加return false，或 - 用 JS 绑定
event.preventDefault()—— 更推荐后者，便于后续加验证、取值等逻辑
如何实时获取所有表单字段的值（含复选框、单选组）？
FormData 是最稳妥的选择，它天然兼容各种控件类型，且不依赖 name 是否唯一（比如多个 type="checkbox" 可同名）。
别用 querySelectorAll('input').forEach(...) 手动遍历 —— 容易漏掉 select、textarea，对多选 checkbox 处理也容易出错。
正确做法：
const form = document.getElementById('test-form');
form.addEventListener('submit', e => {
e.preventDefault();
const data = new FormData(form);
const obj = Object.fromEntries(data.entries());
console.log(obj); // { username: "a", hobbies: "reading", hobbies: "coding" } → 注意：同名键会被后一个覆盖
});
⚠️ 如果需要保留多选 checkbox 的全部值，得手动处理：Array.from(data.getAll('hobbies'))
怎么让输出结果既清晰又可复制？
直接 console.log 不方便用户查看或粘贴；用 alert 又太原始。折中方案是用 textarea 实时渲染 JSON，并设为只读 + 可全选：
- 设置
textarea的readonly属性防止误编辑 - 加
onclick="this.select()"让点击即全选，再 Ctrl+C 就行 - 用
JSON.stringify(obj, null, 2)格式化输出，比JSON.stringify(obj)易读得多
别忘了对空值做兜底：data.entries() 在表单为空时返回空迭代器，Object.fromEntries() 会报错，得先判断 data.keys().next().done 或直接 try/catch
要不要支持文件上传字段的预览？
支持，但仅限本地预览（不真上传）。关键点就一个：input[type="file"] 的 files 属性是 FileList，不能直接 JSON 序列化。
实操建议：
- 检测到
type="file"字段时，跳过写入主对象，单独在输出区下方追加一段提示：“文件字段avatar：1 个文件，大小 2.3 MB，类型 image/png” - 用
URL.createObjectURL(file)可生成临时预览链接，供<img>或<a download></a>使用 - 别调
file.text()或file.arrayBuffer()—— 这些是异步操作，会拖慢响应，纯测试工具没必要
真实场景里，表单字段类型混杂才是常态，工具越贴近这个现实，越不容易在上线前漏掉边界 case。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
