表单提交后页面刷新导致数据丢失，因未配置action或onsubmit阻止默认行为；textarea换行符不统一、select缺少required校验、file上传未设enctype和accept均会导致bug信息缺失。
用户填完就消失？form没配action或onsubmit阻止默认行为
提交按钮一点就刷新页面、输入内容全丢，八成是表单没绑定处理逻辑。HTML form 默认会向当前 URL 发起 GET 请求，不写 action 就等于提交给自己，页面重载——所有未保存的字段瞬间清空。
实操建议：
- 如果用纯前端模拟（比如存到
localStorage或弹窗提示），必须加onsubmit="event.preventDefault(); ..."，否则 JS 逻辑根本没机会执行 - 若后端有接收接口，
action要写对路径（如/api/bug-report），且确保服务端能处理POST和表单编码（application/x-www-form-urlencoded） - 别依赖
button[type="submit"]自动触发 JS —— 它只管提交，不自动调你的函数
textarea里换行存不进数据库？检查前后端换行符统一性
用户在 textarea 按 Enter 输入的换行，在不同系统下可能是 \r\n（Windows）、\n（macOS/Linux），而某些数据库字段（如 MySQL VARCHAR）或 ORM 默认会截断或转义，导致显示成一行或乱码。
实操建议：
- 前端提交前可先标准化：
value.replace(/\r\n/g, '\n').replace(/\r/g, '\n')，避免双换行符干扰 - 后端接收时别直接拼 SQL —— 用参数化查询，否则
\n可能被误当语句分隔符；Node.js 的body-parser、Python Flask 的request.form一般能保留原换行，但入库前仍建议日志打出来确认 - 数据库字段类型选
TEXT而非VARCHAR(255)，避免长度截断（描述 Bug 往往超长）
“优先级”“模块”下拉选项改了但没校验？select缺required + value为空字符串
用户跳过必填的下拉框直接提交，表单却静默通过，常见原因是：select 第一项用了 <option>请选择</option> 但没设 value=""，或者设了 value="" 却漏了 required 属性，导致浏览器不校验空值。
实操建议：
- 必填下拉必须含
required，且首项明确写<option value="" disabled selected>-- 选择模块 --</option> - 所有有效选项的
value不能为纯空格或空字符串，例如<option value="login">登录模块</option>，后端靠这个值做分类，不是靠显示文字 - 不要用
change事件监听来“补救”校验——浏览器原生required会在提交时统一提示，体验更一致
用户上传截图失败？input[type="file"]没配accept和multiple，后端又没接multipart/form-data
点上传按钮没反应、选完文件没显示预览、提交后后端收不到文件 —— 三连问题往往卡在两个地方：前端表单编码类型不对，或后端没启用文件解析中间件。
实操建议：
-
form标签必须带enctype="multipart/form-data"，缺了这句，input[type="file"]的文件数据根本不会发出去 -
input加accept="image/png,image/jpeg,image/gif"限制格式，既提升体验，也减少后端校验负担；加multiple允许一次传多张截图 - 后端如用 Express，需提前挂
multer中间件；如用 Django，确认request.FILES有内容，而不是只看request.POST
真正难的不是堆字段，而是每个输入控件背后的数据流向是否可控——textarea 的换行、select 的空值、file 的编码，任一环松动，Bug 报告就可能缺关键信息。别假设用户会按你想的填。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
