最简单的清空表单（form）方法

最新推荐文章于 2026-01-15 02:19:38 发布

原创最新推荐文章于 2026-01-15 02:19:38 发布 · 2.6w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#form #input #表单重置

收录于

前端同时被 3 个专栏收录

39 篇文章

订阅专栏

JavaScript

20 篇文章

订阅专栏

HTML+CSS

14 篇文章

订阅专栏

新手菜鸟我在做项目的时候遇到了非常非常常见的需求：表单内容清空（充重置），相信有点点HTML+JavaScript的朋友都有办法做到，但我想能不能有代码最少、一步到位的的方法呢，我查了w3c后有了一下总结：

<html>
<head>
<script type="text/javascript">
function formReset()
  {
  document.getElementById("myForm").reset()
  }
</script>
</head>

<form id="myForm">
Name: <input type="text" size="20"><br />
Age: <input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="Reset">
</form>
</body>

</html>

在这里没有用到input的reset元素（input有哪些常见元素请看我的另一篇博客），而是用了更常见的button代替，用一个点击事件触发formReset（）方法，方法就一行代码，超级简单，就实现了清空重置的效果。