用HTML+CSS+JS搭可提交H5预约页：form需method="POST"、name字段与后端一致；时间用date+time降级兼容iOS；手机号加inputmode="numeric"；fetch发请求须设headers、防重复提交、阻默认行为。
怎么用纯 HTML + CSS + JS 快速搭出能提交的 H5 预约页
不能只写静态页面，用户点“预约”必须真能把数据发出去——否则就是假页面。核心是：form 标签得配对后端接口，input 字段要有 name，提交方式选 POST（别用 GET 传手机号/姓名）。本地测试时如果没后端，先用 fetch 模拟发请求到测试接口（比如 https://httpbin.org/post），别直接绑 submit 后 alert 了事。
- 表单必须包含
method="POST"和action（或 JS 中用fetch覆盖默认行为） - 每个必填字段如
<input name="phone">的name值要和后端约定一致，大小写、下划线都不能错 - 时间选择推荐用
<input type="datetime-local">，但 iOS Safari 不支持秒，得降级为type="date"+type="time"组合 - 提交按钮加
disabled和加载态文案（如 “提交中…”），防止重复点击——这是 H5 页面最常被忽略的体验断点
微信内打开时拿不到用户手机号？别硬试 navigator.permissions
微信浏览器（X5 内核）不支持 getPhoneNumber 等原生能力，除非你接入微信 JS-SDK 并走公众号/小程序授权流程。普通 H5 页面里，所有“一键获取手机号”按钮都是伪需求——实际只能引导用户手动输入。常见错误是写了 navigator.permissions.query({name: 'sms'}) 还以为能行，结果控制台报 TypeError: Cannot read property 'query' of undefined。
- 真要提效，可预填微信昵称和头像（需用户点“允许获取用户信息”，调
wx.getUserProfile，且必须在 button click 回调里触发） - 手机号字段加
inputmode="numeric"和pattern="[0-9]*"，iOS 键盘会弹数字键盘 - 别用
autocomplete="tel"期望自动填充——多数安卓 WebView 和微信内置浏览器根本不理这一套
fetch 提交失败但控制台没报错？检查这三处
很多 H5 预约页用 fetch 发请求，看着代码没问题，但后端收不到数据，前端也没提示。大概率卡在这几个地方：
- 漏了
headers: {'Content-Type': 'application/json'}，却用JSON.stringify()传 body —— 后端 Node.js/Koa 默认不解析 JSON，直接读req.body是空对象 - 跨域没配：如果页面域名是
https://a.com，接口在https://api.b.com，后端没返回Access-Control-Allow-Origin: https://a.com，请求会被浏览器静默拦截（network 面板显示cancelled，不是 4xx/5xx） - 忘记
event.preventDefault()，导致表单默认提交刷新页面，JS 请求还没发完就跳走了
为什么 iOS 上日期组件点不动、时间选不了？
<input type="datetime-local"> 在 iOS 15.4+ 才真正可用，旧版本点开直接空白。更麻烦的是，它要求值格式严格为 YYYY-MM-DDTHH:mm（如 2024-06-15T14:30），少一个字符、多一个空格都渲染失败。
立即学习“前端免费学习笔记（深入）”；
- 初始化 value 用
new Date().toISOString().slice(0,16)取前16位，兼容性最稳 - 别用 moment.js 或 dayjs 格式化后直接塞进 value——它们默认带秒，iOS 会拒收
- 如果业务允许，拆成两个字段：
<input type="date">+<input type="time">，然后 JS 拼接，兼容性拉满
inputmode 解析不一致、还有后端把 phone 字段当成数字类型导致开头 0 被吃掉——这些细节不跑真机、不连真实接口，光看桌面 Chrome 是发现不了的。 
