提交HTML表单后如何重置表单？相关代码实现咨询

DevOps 小满

2026-5-26

如何在表单提交后添加重置功能？

嘿，我来帮你搞定这个表单重置的需求！其实很简单，只需要在你的JavaScript代码里添加一行原生的表单重置方法就行，下面分两种常见场景给你修改方案：

场景1：仅在提交成功后重置表单

如果你希望只有当表单数据成功提交到后端后才清空表单内容，只需要在fetch的then回调里添加form.reset()即可：

const scriptURL = 'URL'
const form = document.forms['myform']
form.addEventListener('submit', e => {
  e.preventDefault()
  fetch(scriptURL, { method: 'POST', body: new FormData(form) })
    .then(response => {
      console.log('Success!', response)
      form.reset() // 提交成功后重置表单
    })
    .catch(error => console.error('Error!', error.message))
});

form.reset()是浏览器原生的API，它会把表单里所有的输入控件（比如输入框、单选框、复选框等）恢复到页面加载时的初始状态，非常好用。

场景2：无论提交成功/失败都重置表单

要是你想不管提交结果如何，都清空表单内容，可以用finally回调——它会在fetch的Promise完成（不管成功还是失败）后执行：

const scriptURL = 'URL'
const form = document.forms['myform']
form.addEventListener('submit', e => {
  e.preventDefault()
  fetch(scriptURL, { method: 'POST', body: new FormData(form) })
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message))
    .finally(() => {
      form.reset() // 无论提交结果如何都重置表单
    })
});