表单需用HTML5原生验证+JS增强：手机号用pattern="[1-9]\d{10}"，日期设min为今日；套餐用fieldset分组，单选radio、增值checkbox；提交跳转带参确认页，禁用onsubmit拦截；日期/数字输入框须指定type与inputmode。
表单提交前必须验证手机号和日期格式
用户填错手机号或选了已过期的婚礼日期，后端收不到有效预约，客服还得人工核对。HTML5 原生验证能拦住明显错误，但不能只靠 required 或 type="date" —— 它们不校验手机号合法性，也不阻止用户选今天之前的日期。
-
type="tel"只触发软键盘，无格式限制，必须配合pattern：用pattern="[1-9]\d{10}"拦住非 11 位、开头不是 1 的号码 - 日期控件默认允许选过去的日子，得加 JS 限制：
min属性设为new Date().toISOString().split('T')[0]生成的今日日期字符串 - 提交按钮加
disabled状态，等所有字段通过checkValidity()再启用，避免空点
服务套餐选项要用 fieldset + legend 组织语义结构
“婚礼策划”“跟拍摄影”“司仪主持”这些是互斥还是可叠加？很多页面直接堆 checkbox 或 radio，导致用户勾选混乱，后台也难解析。语义化分组不只是为了 SEO，更是让屏幕阅读器和自动化测试能准确识别逻辑关系。
- 单选套餐（如“基础版/标准版/尊享版”）用
fieldset包裹一组input type="radio"，legend写“请选择服务套餐” - 附加服务（如“增加花艺布置”“双机位拍摄”）单独用另一个
fieldset，legend写“可选增值服务”，里面用checkbox - 每个
input必须有id，对应label for="xxx"，否则移动端点击文字无法聚焦
提交后跳转到静态确认页比用 alert() 更可靠
用 alert("预约成功！") 看似简单，但用户一按确定就没了记录，没法截图、没法回看时间，更没法转发给伴侣确认。而且部分浏览器会拦截频繁弹窗，导致用户以为没提交成功。
- 表单
action指向一个纯 HTML 确认页（如confirm.html），URL 带参数：confirm.html?date=2025-08-12&package=premium - 确认页用
URLSearchParams读取参数并渲染，避免后端依赖；若需存档，再用轻量 JS 发一次 POST 到简易接口 - 不要在表单里写
onsubmit="return false"拦截默认行为——这会让禁用 JS 的用户完全无法提交
手机端日期和数字输入框必须强制调起正确键盘
安卓微信里点日期输入框弹出的是全键盘，iOS Safari 有时把 type="number" 当成科学计数器，输“138”变成“1.38e+2”。不指定输入类型，用户得手动切键盘，体验断层。
- 日期一律用
input type="date"，别用text+ 日历插件——插件在微信内常失效 - 人数、预算等数字字段用
input type="number" inputmode="numeric"，inputmode是关键，它告诉手机该弹数字键盘 - 避免
pattern和type="number"混用：Chrome 会忽略 pattern，Safari 可能报错，统一用min/max控制范围
实际部署时最容易被忽略的是 fieldset 的视觉重置——不同浏览器默认边框和间距差异大，几行 CSS 就能解决，但很多人直接删掉标签图省事，结果语义和可用性全丢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
