表单提交失败后值丢失需靠服务端回填：GET/POST跳转会重建DOM清空输入，仅服务端渲染时将原值写入value/checked或textarea内容中才能恢复；JS fetch提交可避免刷新从而保留数据。
表单提交失败后 input 和 textarea 值丢失怎么办
浏览器默认行为是：表单提交（无论 GET 还是 POST）成功跳转或失败刷新后，input、textarea、select 的值都会清空。这不是 bug，而是标准流程——页面重载会重建 DOM，所有用户输入未被持久化就丢了。
真正能“恢复”的只有服务端渲染时把原值塞回 value 或 checked 属性里。纯前端 JS 提交（如 fetch）不触发页面跳转，自然能保留数据；但一旦走传统表单提交 + 服务端校验失败返回原页面，就必须靠服务端回填。
- 后端模板（如 Django/Jinja2/Thymeleaf）需显式将请求参数或旧数据注入字段：
<input name="email" value="{{ request.form.email or '' }}"> -
textarea要把内容写在起始和结束标签之间：<textarea>{{ old_content }}</textarea>，不能用value属性 - 对于
checkbox和radio，需比对当前值与提交值，动态加checked属性，例如：<input type="checkbox" name="agree" {% if 'agree' in request.form %}checked{% endif %}>
为什么 localStorage + onbeforeunload 不适合表单恢复
有人想用 localStorage 监听 input 实时存值，再在页面加载时读取——逻辑可行，但实际踩坑多：
- 用户切换标签页或意外关闭浏览器，
onbeforeunload可能不触发，导致最新输入丢失 - 多个表单共用同一 key 会互相覆盖，比如两个登录框都存
loginForm - 敏感字段（如密码、身份证号）不应明文存本地，违反安全直觉
- 服务端已返回带错误提示的完整 HTML 页面，此时再用 JS 覆盖字段值，可能和后端渲染冲突，造成 UI 不一致
fetch + FormData 提交时如何保持字段不丢失
这是现代方案中最可控的方式：阻止默认提交，用 JS 发请求，仅在出错时更新错误区域，DOM 结构完全不动。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
关键点在于别手动清空表单，也别跳转：
- 给
<form>绑定submit事件，第一时间调用event.preventDefault() - 用
new FormData(formEl)收集数据，避免手动读value，它能正确处理file、checkbox多选等边界 - 后端返回 JSON 错误（如
{ "errors": { "email": ["格式不正确"] } }），前端只更新对应<span class="error">内容，不碰输入框本身 - 若需重置表单（如“重新提交”按钮），明确调用
formEl.reset()，而不是依赖浏览器默认行为
formEl.addEventListener('submit', async (e) => {
e.preventDefault();
const data = new FormData(e.target);
const res = await fetch('/api/login', { method: 'POST', body: data });
const json = await res.json();
if (!res.ok) {
renderErrors(json.errors); // 只更新错误提示
}
});
服务端返回 422 时浏览器不会自动恢复数据
HTTP 状态码只是响应标识，422 Unprocessable Entity 或 400 Bad Request 并不会让浏览器“记住”原始输入。只要响应是完整 HTML（而非 JSON），页面就等同于一次新加载，所有输入状态归零。
所以重点不在状态码选什么，而在于响应体是否包含已填充的表单字段：
- Django 用户应使用
form.errors和form.data渲染字段，而不是新建空 form - Express + EJS 需把
req.body传入模板，并在每个字段中引用，例如：value="" - 不要依赖客户端 JavaScript 在 422 后“还原”，那意味着你没在服务端做回填——这属于职责错位
最易被忽略的是 select 的 selected 属性：必须逐个比对 option 的 value 和提交值，不能只靠一个变量控制整个下拉框。
