用纯HTML+少量CSS可快速搭建CRM跟进记录页面：使用包裹字段，input[type="text/date/tel/email"]、select预设状态、textarea写跟进内容，添加required/autofocus/name等原生属性实现校验与便捷输入，style内联样式确保离线可用，加reset按钮清空，保存为日期命名HTML文件或转PDF归档。
怎么用纯 HTML + 少量 CSS 快速搭出可填写的 CRM 跟进记录页面
纯 HTML 页面无法保存数据，但能作为内部轻量级表单使用——比如销售每天手填一次、导出为 PDF 存档，或配合浏览器插件（如 Save Page WE）本地保存。关键不是“功能完整”，而是“字段清晰、结构合理、不卡输入”。
实操建议：
- 用
<form></form>包裹所有输入项，即使不提交到服务器，也能利用原生校验（如required）和键盘回车提交逻辑 - 客户姓名、联系方式、跟进日期用
<input type="text">或<input type="date">，避免<textarea></textarea>套错类型 - 跟进状态用
<select></select>预设选项：初次联系、需求确认中、方案已发送、等待反馈、已成交、已流失 - 跟进内容用
<textarea rows="6"></textarea>，加placeholder提示格式：“说了什么、对方反馈、下一步动作、下次联系时间”
为什么不用 JavaScript 也能让这个页面“可用”
很多团队误以为 CRM 页面必须带 JS 才能交互，其实不然。HTML5 表单属性已覆盖基础需求：
-
required属性阻止空提交，点击提交时自动聚焦第一个未填字段 -
type="tel"在手机端唤起数字键盘；type="email"自动校验邮箱格式 -
autofocus放在客户姓名框，打开页面直接可输，省去点选动作 - 所有
<input>和<textarea></textarea>加name属性（如name="contact_name"），方便后续用 Python / Excel 批量解析文本或截图存档
常见错误：把 CRM 页面做成“静态展示页”而不是“记录工具”
看到别人做的 CRM 页面全是卡片、头像、进度条，就照着做——结果字段太少、没留备注空间、日期不能改、状态没法切换。这不是 CRM 页面，是客户信息海报。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 用
<div> 模拟输入框（如 <code><div contenteditable="true">）：无法触发原生校验，复制粘贴异常，iOS 上光标错位 <li>日期写死成 <code><p>2024-06-12</p>：销售每天要手动改，极易漏改、错改 - 状态用图片或文字标签代替
<select></select>：无法筛选、无法导出结构化数据 - 没给
<label></label>绑定for，导致点击文字无法聚焦输入框，触屏设备体验差 - 保存为
crm-followup-20240612.html这类带日期的文件名，Windows / macOS 双系统都支持按名称排序 - 用浏览器“打印 → 另存为 PDF”，PDF 文件自带填写时间戳，且不可篡改，适合周报附件
- 若需多人共用，把该 HTML 文件放在公司内网共享目录（如
\serversalescrm），不依赖任何后台服务 - 别加 Google Fonts 或外部 CSS 链接——断网时样式崩塌，所有样式写在
<style></style>标签里，一行都不外链
导出与复用：如何让 HTML 页面真正进入工作流
这个页面的价值不在“在线运行”，而在“离线可用、易归档、好追溯”。重点不是多炫，而是每次打开都能立刻写、写完能留痕。
最常被忽略的一点：没有“清空本页”按钮。销售填错一次，得手动删七八个字段。加一个 <button type="reset">重置本页</button>，比写 100 行 JS 更实在。
