纯html页面无法真正收留言，必须借助外部服务（如formspree）或localstorage暂存；需设正确action、method及name属性，避免本地双击运行，并通过http服务器部署。
怎么用原生 HTML 搭出能实际收留言的极简页
纯 HTML 页面默认不能存数据，所谓“能收留言”，本质是把表单提交到外部服务或借助浏览器能力做轻量暂存。别一上来就写 form 标签然后本地双击打开——那样点提交只会报错或刷新空白页。
- 最省事的路：用
form的action指向免费后端服务（如 Formspree、Formcarry），配合method="POST"，不用写一行 JS - 纯前端临时方案：用
localStorage存用户刚填的内容，适合演示或离线草稿，但刷新即丢、换设备就没了 - 千万别设
action=""或留空，Chrome 会把表单提交给自己（当前 URL），结果 405 或白屏
表单字段怎么选才不踩坑
用户填什么，你才能收到什么。字段名（name）不是随便起的，它直接决定后端接收到的键名，也影响验证和无障碍访问。
-
name="email"是行业惯例，很多邮件服务靠这个识别联系人；写成name="user_mail"可能导致自动解析失败 - 必填项一定要加
required属性，但注意：仅前端校验，绕过很容易，真正防垃圾信息得靠后端或验证码 -
textarea别漏掉rows和cols，否则默认只有一行高，用户根本看不出能输长文本 - 避免用
placeholder替代label，屏幕阅读器可能跳过 placeholder，且焦点移入后文字消失，对认知障碍用户不友好
提交后怎么让用户知道“真发出去了”
默认表单提交是整页跳转或刷新，用户没反馈就以为失败，大概率重复点击。哪怕不连后端，也要模拟一次“已接收”的状态。
- 如果走 Formspree 这类服务，它们支持
data-success和data-error属性，配合简单 CSS 可切换提示文案 - 纯前端方案里，提交后清空表单 + 插入一句
<div>感谢留言，我们会尽快查看</div>，比留个空框体面得多 - 别用
alert()，打断操作流，移动端还会被部分浏览器拦截 - 按钮提交后立刻置为
disabled，防止连点——尤其用免费服务时，频繁提交可能触发限流
部署时路径和 MIME 类型容易被忽略
本地双击 index.html 能看到页面，但表单大概率提交失败。原因不在代码，在文件运行环境。
- 本地直接打开（
file://协议）下，大多数表单服务拒绝接收请求，报错类似Refused to send form data due to Content-Security-Policy - 必须通过 HTTP 服务访问，哪怕只是用
npx serve或 VS Code Live Server 插件起一个本地服务器 - 上传到静态托管（如 GitHub Pages、Vercel、Netlify）时，确保文件后缀是
.html，不是.htm或无后缀，否则某些 CDN 不返回正确的Content-Type: text/html
极简不等于糊弄。字段名拼错、协议用错、没配好服务回调地址——这些地方出问题，页面看起来再干净也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
