使用reset按钮可快速实现表单重置,通过input或button标签设置type="reset",点击后表单恢复初始value值,JavaScript也可调用reset()方法触发。

在HTML中,实现表单重置功能最简单的方式是使用 reset按钮。点击该按钮后,表单内所有输入项将恢复到初始状态。以下是几种常见的实现方法。
1. 使用input标签创建reset按钮
这是最传统的方法,通过设置 input 的 type 为 "reset" 来生成重置按钮。示例代码:
页面加载时输入框的初始值即为“默认值”,点击“重置”按钮后,所有字段会恢复为此状态。2. 使用button标签实现reset功能
使用 button 元素并设置 type="reset",也可以实现相同效果,且更灵活,支持自定义内容(如文字、图标)。示例代码:
这种写法语义清晰,适合现代前端开发习惯。3. 初始值的重要性
重置按钮恢复的是页面加载时各输入框的初始值,不是空白或占位符。如果想让重置后为空白,请确保初始 value 为空。例如:
立即学习“前端免费学习笔记(深入)”;
- → 重置后显示“张三”
- → 重置后为空
4. JavaScript手动触发重置
除了按钮,还可以用JavaScript调用表单的 reset() 方法来实现重置。示例:
这种方式适用于需要自定义逻辑或绑定其他事件的场景。基本上就这些。使用 type="reset" 的 input 或 button 是最直接的方法,只要表单有初始状态,重置功能就能正常工作。注意区分 placeholder 和 value,避免误解重置行为。不复杂但容易忽略细节。











