退款申请页需字段对齐规则、提交带验证闭环、响应明确提示；必填order_id和refund_reason，refund_amount只读，凭证限图片，移动端须适配iOS/安卓文件上传兼容性。
退款申请页不是“做个表单”就完事——用户填错、后端收不到、样式崩在手机上，这三类问题占了线上退款失败的八成。核心在于：字段必须对齐业务规则，提交必须带验证闭环，响应必须明确告知用户卡在哪一步。
退款申请表单该包含哪些必填字段
别照着“用户信息+订单号”随便堆字段。实际退款流程中，order_id 和 refund_reason 是后端校验起点，缺一不可；refund_amount 必须是只读或禁用输入（由后端返回可退金额），否则前端随意改会导致资金风险；上传凭证用 <input type="file" accept="image/*" multiple>，别允许 PDF——多数支付平台只认图片类凭证。
-
order_id：建议用<input type="text" pattern="[A-Z]{2}\d{8}">做基础格式提示（按你实际订单号规则调整） -
refund_reason：用<select></select>强制选择，避免用户填“其他”后不写说明 - 手机号/邮箱：至少留一个，用于到账通知，且需加
required属性和type="tel"或type="email"
提交前必须做的三步客户端验证
后端永远不能信任前端数据，但前端验证能立刻拦住明显错误，减少无效请求。重点不是“全字段校验”，而是卡住高频失败点：
- 检查
order_id是否为空、长度是否达标（比如少于10位直接报错） - 比对
refund_amount是否超过max_refund（这个值应从接口返回并写入data-max-amount属性） - 判断是否至少上传一张图片：
document.querySelector('input[type="file"]').files.length === 0就阻止提交
别用 alert() 提示——用 <small class="error"></small> 插入对应字段下方，样式设为红色并 display:block。
立即学习“前端免费学习笔记（深入）”；
form 标签的 action 和 method 容易配错
很多新手把 <form></form> 的 action 写成 /refund 就以为完事，结果点击提交跳转到空白页。真实情况是：
- 如果后端是 REST API，
method必须是POST，action应为完整路径如/api/v1/refund，且需配合 JS 阻止默认提交行为 - 如果走传统表单提交（不推荐），
action后端必须返回 HTML 页面（含成功/失败提示），否则用户看到的是 JSON 响应文本 - 务必设置
enctype="multipart/form-data"——漏掉这句，文件上传字段根本不会发出去
没配 enctype 时 Chrome DevTools 的 Network 面板里，Content-Type 会是 application/x-www-form-urlencoded，这就是线索。
移动端适配最容易被忽略的两个细节
退款页在手机上打开率超70%，但 90% 的入门代码会在 iOS 上出问题：
-
<input type="number">在 iOS Safari 会唤出数字键盘但允许输入字母，导致后端解析失败；改用type="tel"+pattern="\d*"更稳 - 上传按钮在部分安卓机型上点击无反应，需加
style="position: relative; overflow: hidden;"，再用<label></label>包裹<input type="file">并设置display: block
别依赖 CSS 框架的“响应式表单”组件——它们通常没处理文件输入的兼容性，手写几行样式反而更可控。
