纯HTML无法实现真正的在线预约选技师功能，它仅能静态展示表单结构；真实功能需JavaScript处理交互逻辑、后端提供数据接口与并发控制。
直接说结论：纯 HTML 实现不了真正的“在线预约选技师”功能，它只能做静态展示和表单结构；所谓“面试必备”，考的是你是否清楚边界——HTML 负责呈现，JavaScript 才能处理技师筛选、时间校验、实时占位，而真实预约必须依赖后端存储和并发控制。
为什么用纯 HTML 做预约页面会立刻露馅
面试官如果看到你交一个只有 form 和一堆 select 的 HTML 文件，基本就判定你没实操过真实场景。典型破绽包括：
- 所有技师名字写死在
option里，无法根据日期/服务类型动态过滤 - 时间插槽（如 10:00、10:30）全是静态
input type="radio"，没人管“这个时段已被约满” - 点了“提交”跳转到
mailto:或空action，连表单数据都没收集验证 - 没有禁用已选技师的其他时段，用户可以重复约同一个师傅的同一时间
HTML 层必须打牢的三块地基
即使不写 JS，HTML 结构也要为后续交互留出明确钩子。重点不是“好看”，是“可扩展”：
- 技师列表用
fieldset包裹，每个技师用input type="radio" name="staff_id"，value必须是数字 ID（如value="102"），别用中文名 - 日期选择用
input type="date"，并加min属性（如min="2024-06-15"），避免选过去的时间 - 服务类型用
select name="service_id"，每个option的value对应后端接口定义的服务 ID，不是“剪发”“烫染”这种文字
JavaScript 补刀的关键动作（面试必提）
只写 HTML 是交卷，加几行 JS 才算答题。以下三点能让面试官眼前一亮：
立即学习“前端免费学习笔记（深入）”；
- 监听
service_id变更，用fetch('/api/staff?service=3')拉取匹配技师，动态填充staff_id列表 - 选完日期和服务后，调
fetch('/api/timeslots?date=2024-06-20&staff=102')获取可用时段，渲染成禁用/启用的button - 表单提交前检查：
if (!form.staff_id.value || !form.timeslot.value)，阻止空提交并聚焦错误项
真正卡住多数人的不是怎么写，而是忘了“技师 A 在 14:00 被用户 B 点了，用户 C 同时打开页面点同一时段”——这必须靠后端事务锁或乐观锁解决，前端再漂亮也拦不住超卖。HTML 只是门脸，别把它当承重墙用。
