表单必须设method="POST"和有效action地址，字段需name属性，邮箱等用type="email"配合required校验，提交按钮须为type="submit"，纯前端HTML无法收消息，须配后端或Formspree等第三方服务。
表单 HTML 结构必须包含 method="POST" 和 action
浏览器默认用 GET 提交，但联系表单要传姓名、邮箱、消息内容，GET 会把数据拼在 URL 上，不安全也不专业。必须显式写 method="POST"。另外，action 不能留空或写成 #——那只是页面内跳转，根本不会发数据。实际要用后端接口地址，比如 action="/api/contact"，或者用第三方服务（如 Formspree）的 endpoint。
常见错误现象：
点提交没反应、页面刷新但没收到邮件、控制台报 405 错误（method not allowed）。
-
<form>标签里缺method或action—— 表单形同虚设 - 用了
action="mailto:xxx@xxx.com"—— 大部分现代浏览器已禁用，且依赖用户本地邮件客户端，基本不可用 - 字段没加
name属性（如<input name="email">）—— 后端收不到这个字段
required 和 type 要配合用，否则校验无效
光写 required 不够。比如邮箱字段，如果只写 <input type="text" required>，用户填 “abc” 也能通过前端校验。必须配合语义化类型：<input type="email" required> 浏览器才真正校验格式；同理，电话用 type="tel"，数字输入用 type="number"。
使用场景：用户手滑输错邮箱，浏览器会在提交前直接标红并提示“请填写有效的电子邮件地址”，不用你写 JS。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
type="email"对大小写不敏感，但会拒绝 “@” 缺失或无域名的情况（如user@） -
textarea也支持required，但得确保有内容（空格不算） - 别信
pattern正则替代方案——太容易写错，且移动端兼容性差
提交按钮必须是 type="submit"，不是 button 或 div
很多初学者用 <button>提交</button>，没写 type 属性，默认是 type="button"，它啥也不干。只有 type="submit" 才能触发表单提交行为。
性能 / 兼容性影响：用 <div onclick="..."> 模拟按钮？不仅键盘用户无法回车提交（无障碍失败），而且绕过表单原生事件机制，后续加 loading 状态、防重复点击都更麻烦。
- 正确写法：
<button type="submit">发送消息</button> - 禁用重复提交可加 JS：
form.addEventListener('submit', e => { btn.disabled = true; })，但前提是它真是个 submit 按钮 - 别用
input type="button"——老式写法，语义弱，CSS 控制不如button灵活
纯前端 index.html 无法真正收消息，必须配后端或第三方服务
这是最容易被忽略的点。你在本地双击打开 index.html，填完表单点提交，浏览器会报错 net::ERR_FILE_NOT_FOUND 或 404，因为没有服务器接收请求。HTML 是静态文件，不处理 HTTP 请求。
可行路径只有两条：
- 部署到带后端的环境（如 Node.js 的 Express、PHP、Python Flask），自己写路由接收
POST数据并转发邮件 - 用免开发服务，例如 Formspree：
action="https://formspree.io/f/your-email@example.com"（需先去官网注册验证邮箱）
别尝试用 GitHub Pages + JS fetch 发送到邮箱 API——绝大多数邮箱服务商（如 Gmail、QQ 邮箱）不开放跨域写信接口，会直接被浏览器拦截。
