HTML5中点击submit提交按钮如何避免表单被重置清空

首先纠正一个常见认知误区：点击type="submit"的按钮本身不会主动清空表单内容，你观察到的输入内容消失，本质是表单默认同步提交后触发了页面刷新/跳转，页面重载后表单元素恢复到了初始的空值状态。要保留原有输入值，可根据你的业务场景选择以下实现方案：

• 方案1：阻止表单默认提交行为（最常用）
  给form元素绑定submit事件，执行preventDefault()屏蔽默认的页面跳转逻辑，自行实现异步提交即可，示例代码如下：

const targetForm = document.querySelector('#yourFormId')
targetForm.addEventListener('submit', (e) => {
  // 阻止原生表单提交跳转
  e.preventDefault()
  // 自定义提交逻辑，比如用fetch/axios异步传数据
  const formData = new FormData(targetForm)
  fetch('/your/submit/api', {
    method: 'POST',
    body: formData
  })
})

该方案不会触发页面刷新，表单原有输入内容会完全保留。

• 方案2：服务端回填表单值
  如果你必须使用传统同步提交（不修改默认提交逻辑），可以在服务端处理完提交请求后，将用户提交的参数重新赋值给返回页面对应表单元素的value属性，示例HTML代码（以PHP为例）：

<input type="text" name="account" value="<?php echo htmlspecialchars($_POST['account'] ?? '', ENT_QUOTES); ?>">

不同后端语言的取值语法不同，核心逻辑是把用户已提交的内容重新回写到输入框的默认值中。

• 方案3：本地存储暂存表单数据
  提交前将所有表单输入值暂存到localStorage或sessionStorage中，页面刷新后读取存储内容回填到表单，适合需要跨页面、跨会话保留填写记录的场景。

如果不需要用到表单原生的提交相关特性（比如回车触发提交、原生表单校验等），也可以直接把按钮的type属性从submit改为button，完全跳过原生表单提交流程，自行绑定点击事件处理数据提交，同样可以保留表单输入内容。

内容的提问来源于stack exchange，提问作者diegogs_