订单表单需语义正确、用户一次填对、后端可靠解析：用POST提交敏感数据，匹配接口路径；合理使用input类型与属性（如number/tel、min/max、pattern）；用fieldset/legend组织选项；必填字段须设required并配label[for]。
订单表单不是“加几个 <input> 就完事”，关键在于语义正确、用户能一次填对、后端能可靠解析——否则你收到的可能是空地址、错乱的规格或根本没提交成功的订单。
用 <form></form> 的 method 和 action 匹配后端接口预期
别默认用 GET；订单数据含敏感信息（如手机号、地址）且通常超长，必须用 POST。同时确认后端接收路径是否带版本或前缀，比如 /api/v2/orders 而非裸根 /submit：
<form method="POST" action="/api/v2/orders">
- 如果后端要求 JSON 提交，需配合 JavaScript 阻止默认提交，并用
fetch()发送，此时action只是占位，实际不触发 - 若用传统表单提交，确保后端能解析
application/x-www-form-urlencoded编码（这是默认行为） - 漏写
method会退化为GET，URL 暴露数据且长度受限，线上环境必出问题
<input type="number"> 和 <input type="tel"> 不只是美化，是输入约束起点
数量字段用 type="number" 可禁用字母输入、唤起数字键盘；电话字段用 type="tel" 在移动端调起拨号键盘——但注意：它们不校验格式，仅控制输入方式：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<input type="number" name="quantity" min="1" max="999" required>
<input type="tel" name="phone" pattern="[0-9+\-\s]{7,}" placeholder="+86 138 1234 5678">
-
min/max对number有效，但 Safari 旧版可能忽略min，建议 JS 补充校验 -
pattern是正则，只在提交时触发，用户粘贴错误号码可能绕过，需服务端二次验证 - 别用
type="number"存价格——小数精度和千分位逗号会导致解析失败，用type="text"+ 后端转 float 更稳
用 <fieldset></fieldset> + <legend></legend> 组织多选规格，避免单选/复选逻辑混淆
颜色、尺寸、配件等选项常混合出现，直接堆 <input type="radio"> 和 <input type="checkbox"> 易导致命名冲突或 JS 获取混乱：
立即学习“前端免费学习笔记（深入）”；
<fieldset> <legend>尺寸</legend> <input type="radio" name="size" value="S" id="size-s"><label for="size-s">S</label> <input type="radio" name="size" value="M" id="size-m"><label for="size-m">M</label> </fieldset> <fieldset> <legend>可选配件</legend> <input type="checkbox" name="accessories" value="case" id="acc-case"><label for="acc-case">保护壳</label> <input type="checkbox" name="accessories" value="charger" id="acc-charger"><label for="acc-charger">充电器</label> </fieldset>
- 同一组单选必须共用
name，否则无法互斥；多选字段（如配件）也应共用name，后端才收得到数组 -
<legend></legend>提供语义分组，屏幕阅读器能识别，也方便 CSS 定位样式 - 别给单选按钮设
required——浏览器只校验是否“有值”，而不会强制你点中一个；得靠 JS 或后端兜底
最常被跳过的其实是 <label></label> 的 for 属性和 id 匹配，以及所有必填字段的 required 属性。这两处一漏，移动端点不准、无障碍失效、空提交直通后端——问题不在代码多难写，而在检查清单没过一遍。
