必须调用 e.preventdefault() 阻止默认提交行为，因在线环境会按html规范发起get请求导致刷新或404；应绑定submit事件并在开头立即执行该方法，而非依赖return false。
为什么在线运行环境里表单一提交就跳转或报错
因为绝大多数在线编辑器（如 CodePen、JSFiddle）默认把 <form></form> 当作真实提交行为处理——哪怕没写 action，浏览器也会尝试用当前 URL 发起 GET 请求，导致页面刷新或 404。这不是环境问题，是 HTML 规范本身的行为。
要让它“只测前端逻辑”，必须显式阻止默认动作。别依赖 return false，它会同时阻止事件冒泡，后续加验证或日志会踩坑。正确做法是绑定 submit 事件并调用 e.preventDefault()：
document.getElementById('test-form').addEventListener('submit', e => {
e.preventDefault();
// 后续取值、校验、输出都放这里
});
怎么在 CodePen/JSFiddle 里拿到所有表单字段值（含多选 checkbox）
FormData 是唯一可靠的选择。手动遍历 input 或靠 querySelectorAll 极易漏掉 select、textarea，对同名多选框更难处理。
- 用
new FormData(form)获取原始数据，天然兼容所有控件类型 - 用
data.entries()转对象时注意：同名 key（如多个hobby）会被后一个覆盖 → 输出是{ hobby: "coding" }，不是数组 - 要保留全部多选值，得改用
Array.from(data.getAll('hobby')) - 空表单时
Object.fromEntries(data.entries())会报错，必须先判断data.keys().next().done === false或包try/catch
如何让测试结果既可读又方便复制
别用 console.log —— 用户看不到；也别用 alert —— 不能复制、破坏体验。最佳实践是渲染到 textarea：
- 设
readonly属性防止误编辑 - 加
onclick="this.select()"，点一下自动全选，Ctrl+C 即可带走 - 用
JSON.stringify(obj, null, 2)格式化，比扁平 JSON 易读得多 - 文件字段（
<input type="file">）不会出现在FormData的文本值里，只显示提示信息，避免误导
用 curl 绕过前端 JS 验证直接测后端接口
在线环境里看到“提交成功”，不等于后端真收到了数据。JS 可能悄悄改了字段名、加了 token、甚至伪造响应。这时候得甩开前端，直连后端：
- 从表单的
action和method推导出目标地址和方法，比如<form action="/api/login" method="POST"></form> - 用
curl -X POST http://localhost:3000/api/login -d "username=test" -d "password=123"模拟提交 - 如果后端要求
Content-Type: multipart/form-data（比如传文件），得换-F参数，而不是-d - 注意：在线编辑器生成的预览 URL 通常不是真实服务地址，本地启个后端或用 mock server 才能真正跑通
真正容易被忽略的是表单字段的 name 属性——没有它，无论 JS 多完善、curl 多标准，后端都收不到那个字段。每次调试前，先用 DevTools 的 Network 面板看请求体里有没有对应 key，比翻十遍代码快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
