表单重置后为什么输入框没清空？

W″晓曼提问于 2026-03-10 00:14:22 阅读 6

交互

我写了个带默认值的表单，点击重置按钮后发现输入框内容没变，还是原来的值，不是应该清空吗？

我试过用 <input type="reset">，也试过手动调用 form.reset()，但都没效果。是不是因为设置了 value 属性就无法重置了？

<form id="myForm">
  <input type="text" value="默认内容" />
  <input type="reset" value="重置" />
</form>

表单重置

我来解答赞 7 收藏

反馈

1 条解答

Prog.仪凡 Lv1

这个其实不是bug，而是HTML表单重置的设计逻辑问题。reset操作会把表单恢复到页面初次加载时的状态，而不是清空所有值。

你代码里设置了value="默认内容"，所以重置后就会回到这个默认值。如果想清空，可以这么做：

1. 要么去掉value属性
2. 要么在JS里手动清空：

document.getElementById('myForm').addEventListener('reset', function() {

  this.querySelector('input[type="text"]').value = '';

});

我们后端处理表单时也经常遇到类似情况，前端传过来的空值有时候需要和未设置值区分开。顺便吐槽下，这种设计确实容易让人误解，我当年也被坑过。

2026-03-10 01:00