表单提交不依赖后端服务器的关键是用fetch+event.preventdefault()拦截默认行为并手动发送数据至第三方服务。需注意cors、字段名匹配、隐藏字段及content-type要求，纯本地存储不属于真正提交。
表单提交不依赖后端服务器，本质是绕过 submit 的默认行为
浏览器原生表单提交（<form method="POST"></form>）必须指向一个可接收请求的服务端地址，否则会报 405 Method Not Allowed 或直接失败。所谓“无服务器环境”，是指没有自己部署的 API 服务或 PHP/Node.js 后端，但并不意味着不能提交——关键在于把数据发给第三方服务或本地处理，而不是让浏览器走传统 POST 流程。
用 fetch + event.preventDefault() 拦截并手动发送
这是最可控、兼容性足够（现代浏览器均支持）的方式。表单本身只负责收集数据，提交逻辑由 JS 完全接管：
- 给
<form></form>绑定submit事件，第一时间调用event.preventDefault() - 用
new FormData(formElement)提取字段，避免手动读取input.value - 目标地址填第三方服务入口，比如
https://api.web3forms.com/submit或https://formspree.io/f/{your-email} - 注意：部分服务要求
Content-Type: application/json，此时需用Object.fromEntries(formData)转对象再JSON.stringify
form.addEventListener('submit', async (e) => {
e.preventDefault();
const data = new FormData(e.target);
await fetch('https://api.web3forms.com/submit', {
method: 'POST',
body: data // 直接传 FormData，服务端能解析 multipart
});
});
静态站点常见坑：CORS、表单字段名不匹配、缺少隐藏字段
很多免费表单服务（如 Formspree、Web3Forms）对请求有硬性要求，稍错就返回 400 Bad Request 或静默失败：
- 必须包含
form元素的data-sitekey或隐藏字段<input type="hidden" name="access_key" value="xxx">（Web3Forms 要求） - Formspree 要求
name="email"字段存在且格式合法，否则拒收 - CORS 不是前端能绕过的，得确认目标服务明确允许你的域名（
Origin），否则浏览器直接拦截请求 - 如果用
fetch发 JSON，别忘了服务端是否支持；多数轻量表单服务只认multipart/form-data
纯前端验证 + 本地存储不是“提交”，别混淆概念
有人把 localStorage.setItem('form', JSON.stringify(data)) 当作提交成功，这其实只是缓存，用户刷新就丢，也不通知任何人。真正的“提交”意味着数据离开当前设备——哪怕只是发到邮箱、Notion 数据库或 Airtable。如果真不需要外发，那就该明确告诉用户：“已暂存，网络恢复后自动同步”，并用 navigator.onLine 检测状态，而不是假装完成了提交。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
