原生html+css可构建可用、可访问、无js依赖的「联系我们」表单，核心在于语义化标签、原生校验（required/type）、label绑定、button[type="submit"]替代input、honeypot防机器人、服务端跳转反馈，以及name与后端严格一致。
直接用原生 HTML + CSS 就能做出可用、可访问、不依赖 JS 的「联系我们」表单，关键不是堆功能，而是让每个字段有明确语义、提交有反馈路径、移动端不崩。
用 <form></form> + required + type 属性做基础校验
浏览器原生校验比手写 JS 更快、更兼容，且自带无障碍支持。别跳过 required，也别滥用 pattern——它容易误判邮箱或电话格式。
实际建议：
-
email类型自动触发邮箱格式检查，tel适合电话（不强制格式，但唤起数字键盘） - 姓名用
text，别设pattern限制中文/空格——真实姓名可能含·、—、英文名 - 消息文本域必须加
required和minlength="10"，防纯空格或乱码提交 - 所有
<input>和<textarea></textarea>都要配<label for="xxx"></label>，ID 必须严格对应
用 button[type="submit"] 替代 <input type="submit">
前者可内嵌图标、文字换行、CSS 控制更稳；后者在某些旧版 Safari 中按钮文字会被截断，且无法用 ::before 插入 SVG。
示例结构：
<button type="submit" disabled> <span>发送中…</span> </button>
注意：disabled 状态必须由 JS 控制（提交前禁用，防止重复点击），但初始状态不能禁用，否则屏幕阅读器会跳过该按钮。
隐藏的 honeypot 字段防机器人
比验证码友好，也不影响真实用户。原理是：机器人会填所有 input，人眼看不到的字段被填了就拒收。
实现要点：
- 加一个
<input name="website" tabindex="-1" aria-hidden="true" style="position: absolute; left: -9999px;"> - 后端收到时，如果
website非空，直接 400 拒绝，不进数据库 - 别用
display: none或visibility: hidden，部分爬虫会识别并跳过
提交后跳转到 thank-you.html 而非 JS 弹窗
弹窗易被拦截，且无历史记录、无法刷新重试。静态跳转最可靠，还能加返回链接和简单状态提示。
服务端只需：
- 接收 POST 数据，存库或发邮件
- 成功后
HTTP 302 redirect到/thank-you.html?status=ok -
thank-you.html里用@#@#@#@#@#@#@#@#@#@0提供明确出口
没有后端？那表单 action 指向第三方如 Formspree 或 Netlify Forms，它们都支持自定义 success 页面。
最常被忽略的是 label 缺失和 name 值与后端约定不一致——字段名对不上，数据就丢了，连日志都查不到是谁填错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
