联系表单必须用包裹，action属性不可为空（如action="#"），method推荐POST；提交按钮需为type="submit"；用required和type（如email、tel）做基础校验；响应式优先用CSS Grid+minmax()；label需for/id关联；提交后按钮应disabled并显示加载态。
联系表单必须用 <form></form> 包裹，否则提交无效
浏览器不会把散落的 <input>、<textarea></textarea> 当作一个提交单元。没套 <form></form>，点按钮根本没反应——连 Network 面板都看不到请求发出。
关键点：
-
action属性不能空，哪怕只是占位：action="#"或指向后端接口（如action="/api/contact"） -
method推荐用POST，避免敏感信息（如邮箱、留言内容）暴露在 URL 中 - 提交按钮必须是
<button type="submit"></button>或<input type="submit">，type="button"不会触发表单提交
用 required 和 type 属性做基础校验，别只靠 JS
用户不填邮箱、乱输电话、空着留言框就点提交——这类问题前端能拦住 80%，没必要等 JS 加载完再判断。
常见组合：
立即学习“前端免费学习笔记（深入）”；
- 邮箱：
<input type="email" required>—— 浏览器自动验证格式，且唤起手机键盘的 @ 符号 - 电话：
<input type="tel">—— 不强制校验格式，但语义清晰、移动端体验好 - 必填项统一加
required，视觉上会触发浏览器默认红边提示（部分浏览器支持:valid/:invalidCSS 伪类）
注意：type="email" 只校验是否含 @ 和域名结构，不验证邮箱真实存在；真正防机器人得靠后端或验证码。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
响应式布局别硬写 media query，用 CSS Grid + minmax() 更稳
联系页常要「左侧信息、右侧表单」桌面端，「上下堆叠」移动端。手写一堆 @media (max-width: 768px) 容易漏断点、难维护。
更直接的做法：
- 容器设
display: grid，列定义用grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr)) - 移动端加一句
grid-template-columns: 1fr即可强制单列，无需复杂条件 -
<label></label>和对应<input>用for/id关联，不仅语义正确，点击标签也能聚焦输入框——这点在小屏上特别实用
提交后没反馈？至少加个 disabled 和加载态文字
用户点提交，页面毫无反应，容易反复点击，导致重复提交或后端报错。最简反馈不是弹窗，而是按钮状态变化。
实操建议：
- JS 监听
submit事件后，立刻给提交按钮加disabled属性：btn.disabled = true - 同时改文字：
btn.textContent = "发送中…"，防止误操作 - 成功/失败后恢复按钮：
btn.disabled = false; btn.textContent = "提交"，别忘了重置
如果后端响应慢，用户可能以为失败而刷新页面——这时候按钮锁死就是最朴素的保护机制。
