纯静态HTML预约表单需用语义化标签构建：form包裹，label[for]关联input/select，服务用select（value英文ID），技师用radio组，日期时间用type="date"/"time"，手机号加inputmode和pattern，时段初始即渲染可用选项，required等原生校验不可少。
用 form 和语义化标签搭出可提交的预约结构
纯静态 HTML 页面无法真正“预约”，但能构建符合表单逻辑、无障碍友好、后续可对接后端的基础结构。关键不是炫效果，而是字段是否覆盖真实业务流：客户信息、服务类型、技师筛选、时段选择、备注。避免用 div 模拟表单控件——所有输入必须包裹在 form 内，且每个 input/select 都要有对应的 label[for]。
实操建议：
-
select用于服务项目（如“剪发”“烫染”），选项值用英文或 ID（如value="cut"），别用中文作 value，方便后端处理 - 技师列表必须用
select或radio组，禁用“点击头像切换”的纯 JS 模拟——没选中时表单无法校验，也绕过原生required - 日期和时间用
input[type="date"]+input[type="time"]，不要用文本框手动输；iOS Safari 对time支持弱，可降级为select小时/分钟下拉 - 客户手机号加
inputmode="numeric"和pattern="[0-9]{11}"，触发数字键盘并做基础格式约束
用 CSS 控制技师卡片的可选状态与视觉反馈
用户点“选技师”时，页面得立刻表明哪个被选中、哪些不可约（比如已满）。纯 HTML/CSS 能做到有限交互：用 :checked 配合 radio + 隐藏的 input，再用相邻兄弟选择器控制卡片样式。别依赖 JS 切换 class——首屏加载时状态就该由 HTML 的 checked 属性决定。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 技师头像用
img但没设alt，屏幕阅读器读不出“李师傅｜12年经验” - “已约满”技师仍可点击，只靠 JS 禁用，但 HTML 层没加
disabled，导致空格键或语音指令仍能触发 - 用
opacity: 0.5表示不可选，但没同步设pointer-events: none，鼠标悬停仍有光标变化，造成误导
示例片段：
<input type="radio" name="stylist" id="stylist-3" value="3" required> <label for="stylist-3" class="stylist-card"> <img src="li.jpg" alt="李师傅｜美发师｜擅长男士剪裁"> <span>李师傅</span> <small>可约：明天 14:00</small> </label>然后用
input#stylist-3:checked + label { border: 2px solid #e74c3c; } 做选中态
时段选择不能只靠 JS 动态渲染
用户选了技师和服务后，可约时间得变——但首次加载时，必须有默认可用时段列表（哪怕只有 3 个），否则 SEO 友好性归零，爬虫看不到任何可预约时间，也影响 Lighthouse 评分。动态更新是增强，不是替代。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
使用场景：
- 如果技师 A 明天只剩 10:00/15:00，那 HTML 里就只放这两个
option，而不是先塞满全天再用 JS 隐藏 - 时段
select的value应为 ISO 格式时间戳（如"2024-06-15T10:00"），而非“上午10点”，避免后端解析歧义 - 禁用
onchange写内联 JS，把事件绑定抽到外部 script，方便调试和复用 - 若时段需按服务类型过滤（如“烫染”需 2 小时，只显示整点），则初始 HTML 应包含所有可能时段，用
data-属性标记服务兼容性：<option value="10:00" data-services="cut,perm">10:00</option>
表单提交前必须有客户端校验，但别只信它
required、type="email"、minlength 这些原生属性能拦截明显错误，减少无效提交，但它们只是守门员，不是裁判。用户关掉 JS 或用 curl 提交时，这些完全失效。
容易踩的坑：
- 只在 JS 里做手机号正则校验（如
/^1[3-9]\d{9}$/），但 HTML 层没设pattern，导致移动端不弹出数字键盘 - 用
alert()提示错误，打断操作流，且无法被自动化测试捕获 - 提交按钮写成
<button type="button">，再用 JS 触发 submit，绕过了表单原生校验机制 - 没给
form设action和method，导致“提交”只是刷新页面，用户以为失败
最简可行方案：form 的 action 指向一个真实存在的后端接口地址（哪怕返回 405），method="POST"，所有必填字段带 required，手机号加 inputmode="tel" 和 pattern。这样即使没 JS，也能触发浏览器默认提示。
复杂点在于：时段和技师的联动校验无法靠 HTML 原生完成，必须后端兜底——比如用户提交了“李师傅 + 明天 10:00”，但李师傅那会儿刚被别人约走，页面得明确返回“该时段已不可用”，而不是静默失败。这个逻辑 HTML 做不了，别硬塞进前端验证里。
