用 fieldset+legend 实现语义化只读订单预览，通过 disabled 属性天然阻断交互、传达不可编辑意图，配合 readonly 区分展示与锁定字段，HTML 原生格式化金额日期，@media print 保障打印可用性。
用 fieldset + legend 做语义化只读订单区块
纯 html 实现订单预览，核心不是“禁用表单”，而是让结构本身表达「不可编辑」的意图。浏览器默认对 fieldset 应用视觉灰阶和边框，配合 disabled 属性能直接阻断所有子控件交互，比手动加 readonly 或 css pointer-events: none 更可靠。
-
fieldset天然语义是「一组相关字段」，比div更准确，屏幕阅读器会读出legend作为区块标题 - 必须显式写
disabled在fieldset上，而不是每个input单独加 —— 否则下拉框、复选框仍可点开或切换 - 注意：Chrome/Firefox 对
disabled fieldset内的textarea会保留滚动条，但 Safari 有时不响应鼠标滚轮，需加tabindex="-1"确保键盘可聚焦查看长文本
readonly 和 disabled 在订单字段里的区别必须分清
订单号、商品名这类纯展示字段用 readonly，而金额、状态下拉这类本该可选但当前锁定的字段必须用 disabled。混用会导致表单提交行为异常或可访问性断裂。
-
readonly的input仍会随表单提交，值能被后端收到；disabled的字段完全不参与提交 —— 订单预览页若含隐藏校验字段（如<input type="hidden" name="order_token" value="abc123">），千万别误加disabled -
readonly只对text、search、tel、url、email、number、password有效；对select、checkbox无效，强行加没反应 - 移动端 iOS Safari 对
readonly输入框双击仍会唤起键盘，建议加onfocus="this.blur()"防止光标意外激活
订单金额、日期等格式化字段别用 JS 拼接，用 HTML 原生属性兜底
价格显示要带千分位、小数点后两位，日期要转成「2024-03-15」格式——这些看似得靠 JS 格式化，其实 HTML 本身就能扛住基础场景，避免 JS 加载失败时订单变成 NaN 或原始时间戳。
- 金额用
data-amount="19999"存原始数字，显示层用€199.99这类静态 HTML，而非依赖 JS 插入；后续 JS 可读取dataset.amount做计算，但页面始终有可用内容 - 日期字段优先用
<time datetime="2024-03-15">2024年3月15日</time>，既语义清晰，又兼容无 JS 环境，datetime属性值是机器可读的标准格式 - 避免在 HTML 里写
<span id="total"></span>然后等 JS 填充 —— 首屏渲染空白或闪烁，SEO 也抓不到关键信息
打印订单预览时样式崩坏？用 @media print 直接控制
用户点击「打印订单」，结果地址栏、按钮、背景图全打出来，或者金额列被截断 —— 这不是 JS 问题，是 CSS 没隔离打印上下文。
- 所有非必要元素（如「返回」按钮、页脚导航）加
print:hidden类，并在@media print里统一设display: none，别依赖 JS 移除 DOM - 订单表格用
table-layout: fixed+ 显式width，防止打印时列宽自适应导致文字换行错乱 - 颜色相关样式（如红色错误提示）在
@media print里强制转为黑白色：color: #000 !important; background: transparent !important;，否则部分打印机默认关闭彩色输出，文字直接消失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
