售后页面需三秒内明确“我能做什么”“要填什么”“填完怎么走”，须用语义化form、fieldset/legend、label绑定、flex布局适配、文件上传优化及提交状态管理。
售后页面不是堆砌表单和按钮就行，核心是让用户三秒内看清「我能做什么」「要填什么」「填完怎么走」。结构混乱、字段错位、提交无反馈，直接导致用户放弃申请。
用 form 包裹全部字段，别漏掉 fieldset 和 legend
售后表单必须语义清晰。只用 div 套 input，屏幕阅读器读不出逻辑，也容易漏校验。关键点：
-
form标签必须有method="post"和明确的action（哪怕先指向#） - 把「订单信息」「问题描述」「附件上传」这些模块用
fieldset隔开，每个加legend—— 这是唯一被浏览器强制识别为区块标题的标签 - 所有
input、textarea、select必须配label，且用for指向对应id；不要只靠视觉对齐 - 必填字段在
label后加<span aria-hidden="true">*</span>，再用 CSS 伪类::after渲染星号，避免语音朗读时读出“星号”
display: flex 控制横向字段对齐，但别让 textarea 被压扁
地址、联系方式这类并排字段，用 Flex 最稳。但常见错误是父容器设了 flex，子项却没控高宽，结果 textarea 变成一条线。
- 横向双字段布局：父容器
display: flex; gap: 16px;，两个子项都设flex: 1;，但给textarea单独加min-height: 120px; - 电话+邮箱并排时，用
input[type="tel"]和input[type="email"]，浏览器会触发对应软键盘，也支持基础格式校验 - 避免对
input设固定width: 300px—— 移动端直接溢出。改用flex: 1; min-width: 0;，配合max-width: 100%; - 如果字段带图标（如电话小图标），用
background-image+padding-left，别用额外span，否则 Flex 对齐易错乱
上传区域用 label 模拟按钮，禁用 input[type="file"] 默认样式
原生文件上传控件丑、难定制、移动端点击区域小。直接隐藏它，用 label 触发，同时保留语义和可访问性。
立即学习“前端免费学习笔记（深入）”；
-
input[type="file"]加position: absolute; clip: rect(0 0 0 0);彻底隐藏但保功能 - 同级
label设display: inline-flex; align-items: center; gap: 8px;，内嵌文字和 SVG 图标 - 给
label加cursor: pointer;和user-select: none;，防止误选文字 - 上传后显示文件名，用 JS 更新
label的textContent，别写死在 HTML 里 - 限制类型和大小：在
input上写accept="image/*,.pdf"和data-max-size="5242880"（5MB），JS 侧校验，别只信前端
提交按钮状态必须区分「默认」「加载中」「成功/失败」
用户点提交后没视觉反馈，90% 会连点三次。更糟的是，按钮没禁用，导致重复提交订单。
- 初始状态：
button[type="submit"]保持disabled为false，但加data-state="idle" - 点击后立刻设
disabled为true，data-state="loading"，文字变成「提交中…」，加pointer-events: none;防双击 - 接口返回后，根据结果切
data-state="success"或data-state="error"，并移除disabled - 别用
opacity: 0.5表示禁用 —— 屏幕阅读器仍可聚焦。用aria-disabled="true"替代
最常被忽略的其实是错误提示位置：别把报错塞进 toast 或顶部横幅，而应紧贴出错字段下方，用 aria-live="polite" 让读屏器自动播报。字段校验不是前端炫技，是降低用户放弃率的第一道防线。
