邮件列表表单必须用<form>且method设为post，禁用get以防邮箱泄露；需添加required和autocomplete="email"提升体验；前端校验仅作快速反馈，后端须做域名有效性检查；防机器人应使用时间戳或CSRF token；提交后须用fetch避免刷新并提供明确状态反馈。
邮件列表表单必须用 <form>，且 method 不能设为 get
用户填完点提交却没反应，或跳转到一长串 URL 参数页面——大概率是用了 method="get"。邮件订阅本质是向后端提交数据，必须用 post（或现代场景下更推荐 POST 对应的 fetch + event.preventDefault()）。get 会把邮箱暴露在 URL 和服务器日志里，还可能被缓存或误分享。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<form method="post" action="https://your-api.com/subscribe">是最简可用方案 - 如果前端要自己发请求（比如调用 Mailchimp、ConvertKit 的 API），就别写
action，改用 JS 拦截submit事件 - 务必给
<input type="email">加required和autocomplete="email"，既校验又提升移动端体验
input[type="email"] 的验证局限性得靠后端兜底
浏览器自带的邮箱格式检查（比如 user@ 后没域名）只能拦住明显错误，但无法判断 test@.com 或 admin@localhost 这类“语法合法但实际无效”的地址。更关键的是：用户可能填错、乱填、用临时邮箱（如 10minutemail），前端 JS 校验再严也没用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 前端可加一层简单正则（如
/^[^\s@]+@[^\s@]+\.[^\s@]+$/），但仅作快速反馈，不替代后端 - 后端收到后必须做 DNS MX 记录探测（可选）、邮箱域名有效性检查，至少要拒绝空域名、常见无效后缀（如
@example.com） - 别依赖
inputmode="email"——它只影响软键盘，对验证无实质作用
隐藏字段防机器人，但 type="hidden" 不够用
纯靠 <input type="hidden" name="bot-check" value="0"> 挡不住基础爬虫。很多垃圾订阅来自自动脚本，它们照填 hidden 字段，甚至绕过 JS。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加一个带时间戳的 hidden 字段（如
<input type="hidden" name="ts" value="<server-timestamp>">），后端比对提交时间是否超时（比如 >30 秒） - 更有效的是服务端生成一次性 token（CSRF token），嵌入 form 并校验签名，比纯时间戳难伪造
- 如果用第三方服务（如 Buttondown、Substack），它们通常自带 honeypot 字段——加一个 display:none 的
<input name="website">，人类不会填，机器人常会填满
提交后状态反馈必须脱离表单重载逻辑
直接 action 提交会导致整页刷新，用户看不到“已发送”提示，也难处理网络失败。尤其移动端，刷新后滚动位置丢失，体验断层。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
fetch()发送，成功后清空输入框、显示感谢订阅文案，失败则提示具体错误（如 “邮箱已被注册”、“网络异常”） - 禁用提交按钮防止重复点击：
button.disabled = true，成功/失败后才恢复 - 别用
alert()—— 它阻塞 UI 且无法样式定制；用<div class="feedback">浮层或内联提示更可控
复杂点在于：不同邮件服务商返回的错误结构不一致（Mailchimp 返回 title 和 detail，Sendinblue 返回 message），前端得适配解析。这点容易被忽略，结果就是所有错误都显示“请重试”。
