错题本导出功能必须用单选按钮实现html/pdf/excel三种互斥格式选择，name统一为export_format，value分别设为html、pdf、xlsx，且需默认选中并校验checked状态。
导出格式选项的 HTML 表单结构怎么写
错题本导出功能里，“HTML / PDF / Excel”是三种互斥的导出目标，必须用单选按钮（<input type="radio">）实现，不能用下拉菜单或按钮组——否则语义错误、无障碍不通过，且后端难以统一识别。
关键点在于所有选项共享同一个 name 属性（如 export_format），并为每个值设置明确的 value：
-
value="html"对应纯 HTML 导出（浏览器直接打开，含样式和交互） -
value="pdf"触发后端生成 PDF（通常需额外配置页眉页脚、分页） -
value="xlsx"（不是excel）是更准确的 MIME 类型标识，兼容性优于xls
示例片段：
<label><input type="radio" name="export_format" value="html" checked> HTML（保留高亮与题目链接）</label><br><label><input type="radio" name="export_format" value="pdf"> PDF（A4 排版，适合打印）</label><br><label><input type="radio" name="export_format" value="xlsx"> Excel（.xlsx，可排序筛选）</label>
为什么不能用 <select></select> 或按钮组代替 radio
用下拉菜单（<select></select>）看似简洁，但实际会带来三个硬伤：
- 用户无法同时看清全部导出选项的说明文字（比如“PDF 适合打印”这种提示在下拉里会被截断）
- 移动端点击热区小，误操作率高；而
radio+label可扩大点击范围 - 部分旧版屏幕阅读器对
<select></select>的aria-label支持不稳定，而radio的 label 天然可读
按钮组（如 Bootstrap 的 btn-group）则缺乏原生表单语义，提交时可能丢失值，且需要额外 JS 绑定 checked 状态，徒增维护成本。
value 值命名要匹配后端路由或 API 字段
前端写的 value="xlsx" 必须和后端接收参数的 key 完全一致，常见坑有：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 前端写
value="excel"，后端却只认format=xlsx→ 导出失败，返回 400 - 大小写混用：前端
value="PDF"，后端只处理小写pdf→ 默认 fallback 到 HTML - 遗漏空格或特殊字符：比如
value="excel-2023"，但后端没做字符串 trim 或正则校验 → 拒绝该选项
建议在前后端联调前，先确认接口文档中导出格式字段的合法枚举值，并严格对齐。调试时可在浏览器控制台用 new FormData(form).get('export_format') 实时验证选中值。
导出按钮触发逻辑必须检查 checked 状态
点击“导出”按钮时，不能直接发请求，必须先校验是否有选项被选中。否则用户未点任何格式就点导出，后端可能返回空文件或 500 错误。
简单校验逻辑（无需框架）：
const format = document.querySelector('input[name="export_format"]:checked');<br>if (!format) {<br> alert('请选择导出格式：HTML、PDF 或 Excel');<br> return;<br>}<br>// 后续发起 fetch 或表单 submit
注意：不要用 document.querySelectorAll(...).forEach 遍历判断，:checked 伪类已足够精准；也不要依赖 selectedIndex ——那是 <select></select> 的属性，对 radio 无效。
最容易被忽略的是「默认选中项」的语义合理性：虽然加了 checked，但如果后端不支持该格式（比如暂未上线 PDF 功能），这个默认值反而会造成误导。上线前务必确保所有 value 对应的后端能力已就绪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
