纯html预约挂号页仅能呈现静态界面，无法真正挂号，因其必须对接医院后台系统，涉及登录、号源库存、支付、短信通知等完整链路；若仅作演示或对接接口的前端页面，则需结构清晰、表单合规、交互合理、适配医疗场景，重点包括语义化form结构、科室-医生-时段三级垂直选择、余号明确标注、手机号与身份证号pattern校验、禁用时段视觉区分、一屏到底挂号动线及移动端操作友好性。
直接做纯 HTML 的“预约挂号页”只能呈现静态界面，无法真正挂号——挂号必须连医院后台系统，涉及用户登录、号源库存、支付、短信通知等完整链路。如果你只是要一个可演示、可嵌入、能对接后续接口的前端页面，那重点是结构清晰、表单合规、交互合理、适配医疗场景。
用 form + 语义化标签搭挂号主结构
别用 div 堆砌表单，挂号页本质是数据收集流程，必须用标准 form 包裹，关键字段加 required 和 aria-label（方便无障碍访问）。科室、医生、时段三个选择是核心链路，按顺序垂直排列，避免横向滑动或折叠隐藏。
常见错误：把医生列表做成纯图片轮播，或用 select 硬塞 200 个医生选项导致卡顿。
- 科室用
select，但选项不超过 12 个，超出就加搜索过滤（后续用 JS 实现） - 医生列表用
fieldset+legend分组，每人用label包裹input type="radio"，禁用click时没反馈的div模拟单选 - 挂号时段必须显示「余号」，哪怕只是静态数字，例如：
<span class="quota">余 3 号</span>，别写“有号”这种模糊表述
input type="tel" 和 input type="idcard" 要加 pattern 校验
挂号必须填手机号和身份证号，但浏览器原生不支持 idcard 类型，得靠 pattern 和 JS 补位。手机号不能只用 type="tel" 就完事——它不校验格式，用户输“123”也能提交。
正确做法：
- 手机号：
<input type="tel" pattern="^1[3-9]\d{9}$" required>，配合title="请输入11位中国大陆手机号" - 身份证号：
<input pattern="^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$" required>，注意末位可能是 X - 所有敏感输入加
autocomplete="off"，防止浏览器填充错误历史记录（比如上次填的是家属身份证）
时段选择别用原生 input type="datetime-local"
这个控件在 iOS 和部分安卓机上会强制弹出系统时间选择器，且不支持只选日期+固定时段（如“上午 8:00–10:00”），和挂号实际场景错位。用户需要看到的是带余号、可点击、视觉分组的卡片式时段列表。
实操建议：
- 每个时段用
button type="button"或带role="radio"的div，绑定data-time="2024-06-15T08:00"属性，方便后续传给接口 - 禁用时段加
disabled或aria-disabled="true"，并置灰 + 加删除线样式，别只靠颜色区分（色弱用户不可见） - 当前时间后推 30 分钟内的号源，自动标为「即将放号」，用
small标签轻量提示，不打断主流程
CSS 布局优先保证「挂号动线」一屏到底
别为了美观把科室选择放在顶部导航栏、医生列表藏进 Tab、时段塞进 Accordion。真实挂号场景中，用户平均停留时间不足 90 秒，必须让「选科→选医→选时间→填信息→提交」全程不滚动或仅一次滚动即可完成。
关键约束：
- 移动端用
max-width: 480px限定容器宽度，避免文字过小或按钮太挤 - 所有
input和button的height不低于 44px，满足手指点击热区要求 - 错误提示不用弹窗，就在对应字段下方加
<small class="error">手机号格式不正确</small>，且触发focus时自动滚动到该字段
真正难的不是写出来，而是把「余号实时更新」「跨院区号源同步」「退号后时段回填」这些逻辑，用前端状态管理稳稳接住——HTML 页面只是第一块砖，后面每一块都得对得上医院 HIS 系统的 API 字段和业务规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
