前端html表单无法直接发邮件，必须配合后端接口（如vercel/netlify函数）调用邮件服务；需用post、禁用默认提交、前后端双重校验、防注入、环境变量管理密钥。
怎么用 <form></form> 写一个能发到邮箱的反馈表单
纯前端 HTML 表单本身不能直接发邮件——<form></form> 的 action 属性如果写成 mailto:xxx@example.com，依赖用户本地邮件客户端，失败率高、字段不可控、无校验、移动端基本不可用。
真正可用的反馈表单必须配合后端（哪怕是最简服务）。常见做法是：POST 到你自己的轻量接口（比如用 Netlify Functions、Vercel Edge Function 或几行 PHP），再由它调用邮件服务（如 SendGrid、Resend 或 SMTP）。
-
method="POST"是必须的；GET会把用户输入拼在 URL 里，不安全也不体面 -
enctype="multipart/form-data"仅当需要上传文件时才加，普通文字反馈不需要 - 别信“一行 JS 发邮件”的 npm 包——它们只是封装了对后端 API 的调用，不是魔法
required 和 type="email" 真的够用吗
浏览器原生校验只防手滑，不防恶意提交。比如 type="email" 允许填 a@b.c 这种明显无效格式；required 能被禁用 JS 或绕过 DOM 直接 POST 绕过。
所以：前端校验是体验层，后端校验才是底线。至少得在服务端检查 email 字段是否含 @ 和点号、长度是否合理、内容是否含异常字符（如 \n、%0a 防止邮件头注入）。
立即学习“前端免费学习笔记（深入）”；
-
<input type="email" required>适合快速提示用户，但不能替代后端正则/^.+@.+\..+$/ - 别用
pattern做复杂邮箱验证——正则太强反而误伤国际邮箱，太弱等于没写 - 所有字段提交前，建议用
trim()清空首尾空格，否则容易收到纯空格的message
为什么提交后页面总跳转或空白，而不是友好提示
因为默认 <form></form> 提交会触发整页刷新。要保持当前页面并显示成功/失败信息，必须阻止默认行为，用 fetch 或 XMLHttpRequest 手动提交。
关键点：监听 submit 事件，调用 event.preventDefault()，再发请求。响应回来后，根据 response.ok 或返回的 JSON 字段更新 UI。
- 别在
fetch().then()里直接操作 DOM 而不检查response.status === 200——后端可能返回 500 却没抛错 - 按钮提交后建议立刻
disabled，防止重复点击导致多封邮件 - 错误提示别只写
alert()，用户关掉就没了；用<div id="feedback"></div>动态写入更稳妥
用 Netlify 或 Vercel 部署时，表单后端怎么配
静态托管平台不运行传统后端，但都支持边缘函数或 serverless 函数作为表单接收端。路径和权限稍有差异，容易卡在 CORS 或 404。
以 Vercel 为例：函数文件放 api/contact.ts，导出默认 handler；部署后访问地址是 /api/contact，不是 /functions/contact。Netlify 则要求函数放在 netlify/functions/ 下，调用路径为 /.netlify/functions/contact。
- 函数里必须设置
Content-Type: application/json响应头，否则前端fetch().json()会失败 - 跨域问题：Vercel 默认允许所有来源；Netlify 需手动在函数里加
Access-Control-Allow-Origin: * - 别把 API 密钥写死在前端——全部通过环境变量注入函数，在
process.env.SENDGRID_API_KEY里取
