健身打卡表单必须包含日期、运动类型、时长、强度、完成状态五个关键字段；需用date输入框、select下拉、number限制、range滑块和checkbox实现，并做好前端校验、防重复提交及移动端适配。
表单必须包含哪些字段才真正有用
健身打卡不是记流水账，关键字段要能支撑复盘：日期、运动类型、时长、强度（主观或心率）、是否完成。缺了日期就无法按周/月统计；只写“跑步”不写时长和配速，下次没法对比进步；没标记完成状态，数据看板会漏掉中断记录。
-
date类型输入框（浏览器自动带日历），别用text手动输 2024-06-15，容易格式错 -
select下拉选运动类型，预设常见项：running、cycling、weight_training、yoga，避免自由输入拼错 -
number输入时长（单位分钟），加min="1"防止填 0 或负数 - 用
range滑块选主观强度（1–10），比文字描述更一致；若对接心率设备，可额外加heart_rate字段 -
checkbox标记completed，默认勾选，未完成再手动取消——符合多数人“打卡即完成”的心理路径
提交前必须拦截的典型错误
用户点提交后跳 404 或静默失败，八成是前端没校验。重点防三类问题：
- 日期为空或晚于今天 → 用
required+max属性：<input type="date" max="2024-06-15">（动态生成可用 JS 更新） - 时长填了字母或小数 →
type="number"自带基础过滤，但需补充step="1"禁用小数（除非你真需要 42.5 分钟） - 运动类型选了“其他”却没填自定义名称 → 若下拉含
<option value="other">其他</option>，对应文本框必须required且仅在选中时显示（用 JS 切换display）
提交后如何避免重复打卡
用户手抖连点两次提交，后端没做幂等性，数据库就多一条重复记录。前端能做的底线防护：
- 提交按钮加
disabled状态：document.querySelector('button').disabled = true;，防止二次点击 - 提交成功后清空表单但保留日期（今天大概率还要练），用
form.reset()后单独恢复date值 - 若用 AJAX 提交，HTTP 状态码非
201或200时，务必将按钮重新启用并提示错误（比如网络超时），否则用户以为卡死又狂点
移动端适配最容易被忽略的细节
健身场景常在手机上快速打卡，但默认表单在 iOS Safari 上有坑：
-
date输入框在 iOS 会唤出滚轮式日历，但高度占满屏幕——加style="width:100%; padding:0.5em;"缩小内边距，避免误触 -
range滑块在 Android 和 iOS 渲染不同，统一加 CSS：input[type="range"] { -webkit-appearance: none; }再自定义轨道样式 - 数字键盘优先：给
number字段加inputmode="numeric"，iOS 会直接弹出数字键盘，省去切换步骤
日期选择器的滚动惯性、滑块拖拽的响应延迟、按钮点击反馈的视觉确认——这些细节能决定用户愿不愿意坚持打卡。别让技术细节拖慢一次呼吸间的记录动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
