用 form 标签搭建旧机评估表单骨架：设 method="post"、action="/api/evaluate"、novalidate；品牌型号用 text 输入框，购买年份用 select 下拉（2018 至今年），外观成色用 radio（name 相同、value 区分、required），故障描述用 textarea（rows="4"、maxlength="500"、placeholder 示范）、换行由后端统一归一化；照片上传用 input[type="file"]，accept="image/*" 加 js 初筛与后端 mime 校验，支持 multiple 但需 js 限数量；提交按钮点击即 disabled 并改文字，fetch 的 finally 恢复；草稿存 localstorage 但避开敏感信息。
怎么用 form 搭出旧机评估表单的骨架
旧机换新表单本质是带校验的多字段数据收集，不是静态页面。直接套用 form 标签最稳妥，别用 div + JS 模拟——浏览器原生提交、回退、自动填充、无障碍支持全靠它撑着。
关键点：必须设 method="post"（避免敏感信息暴露在 URL），action 先填占位路径如 /api/evaluate，后端接口定好再改；加 novalidate 留给 JS 做统一校验，不然浏览器默认提示样式难控制。
-
input[type="text"]用于品牌、型号（别用type="search"，会多出 X 清空按钮） -
select做成“购买年份”下拉，选项从 2018 到今年，别漏value属性，否则提交的是文本而非数值 - “外观成色”用
input[type="radio"]，name 相同、value 区分（如value="excellent"），别忘加required
textarea 写“故障描述”时为什么总被用户乱换行
用户贴日志、写“屏幕闪+重启三次”这种内容，天然需要换行。但默认 textarea 提交时换行符是 \r\n，后端 PHP/Python 若没处理，可能存成一团或被截断。
解决方法不是禁换行，而是提前约定：前端不干预，后端接收时用 str.replace(/\r\n/g, '\n') 统一归一化。另外加 rows="4" 和 maxlength="500" 控制长度，防止用户狂敲 2000 字。
- 别设
heightCSS 强制固定高度，会遮挡滚动条，用户看不到自己写了多少 - placeholder 里写示例：“如：充电口松动，插电无反应”，比“请描述问题”更有效
- 移动端注意加
autocapitalize="none"，避免 iPhone 自动大写“iPhone”成“Iphone”
“上传旧机照片”用 input[type="file"] 的兼容性坑
老系统（IE11）、低端安卓 WebView 对 accept 属性支持差，设 accept="image/*" 在某些机型上根本不限制文件类型，用户可能传个 PDF 上来。
必须双保险：前端用 files[0].type.startsWith('image/') 做 JS 初筛，后端再校验 MIME 类型和文件头（光看后缀 .jpg 不靠谱）。上传前显示缩略图，能立刻暴露格式错误。
- 加
multiple属性允许一次选 3 张，但得配 JS 限制总数，否则用户狂点选 20 张卡死页面 - 别用
capture="environment"强制调后置摄像头——部分国产机不支持，直接报错 - Android 微信内置浏览器对
change事件触发有延迟，建议监听input事件更可靠
提交后怎么避免用户狂点“评估”按钮导致重复提交
网络稍慢，用户看到按钮没变就再点，后端收到两条一模一样的评估请求，数据库里多一条脏数据。
最简方案：点击后立即禁用按钮，文字改成“评估中…”，成功/失败后再恢复。别只靠 CSS opacity，得设 disabled 属性，否则仍可聚焦、仍可回车触发。
- 用
fetch发请求时，把button的disabled状态和fetch的finally块绑定，别只写在then里——失败了按钮就永远卡住 - 如果用了防抖（debounce），反而更危险：用户第一次点没反应，以为没点上，连点三下，实际只发最后一次，但体验极差
- 后端也要加幂等 key（比如用手机号+时间戳哈希），不能全指望前端
旧机表单里最容易被忽略的是“用户改主意”场景：填到一半关掉页面，下次进来得能恢复。localStorage 存字段值可以做，但别存敏感信息如 IMEI；更关键是，别让“恢复草稿”功能干扰首次填写的引导逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
