html如何实现重置_HTML表单重置（reset按钮）功能实现方法

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

html如何实现重置_HTML表单重置（reset按钮）功能实现方法

2025-11-02

浏览次数：次

返回列表

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

html如何实现重置_html表单重置（reset按钮）功能实现方法

在HTML中，实现表单重置功能最简单的方式是使用 reset按钮。点击该按钮后，表单内所有输入项将恢复到初始状态。以下是几种常见的实现方法。

1. 使用input标签创建reset按钮

这是最传统的方法，通过设置 input 的 type 为 "reset" 来生成重置按钮。

示例代码：

<form>
  <label>姓名：</label>
  <input type="text" name="username" value="" /><br/><br/>

  <label>邮箱：</label>
  <input type="email" name="email" value="" /><br/><br/>

  <input type="submit" value="提交" />
  <input type="reset" value="重置" />
</form>

页面加载时输入框的初始值即为“默认值”，点击“重置”按钮后，所有字段会恢复为此状态。

2. 使用button标签实现reset功能

使用 button 元素并设置 type="reset"，也可以实现相同效果，且更灵活，支持自定义内容（如文字、图标）。

示例代码：

<form>
  <input type="text" name="city" placeholder="请输入城市" /><br/><br/>

  <button type="submit">提交</button>
  <button type="reset">清空填写</button>
</form>

这种写法语义清晰，适合现代前端开发习惯。

3. 初始值的重要性

重置按钮恢复的是页面加载时各输入框的初始值，不是空白或占位符。如果想让重置后为空白，请确保初始 value 为空。

例如：

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319 查看详情 OneStory

→ 重置后显示“张三”
→ 重置后为空

若通过J*aScript动态修改了值，reset 按钮仍会回到最初HTML中的 value 状态。

4. J*aScript手动触发重置

除了按钮，还可以用J*aScript调用表单的 reset() 方法来实现重置。

示例：

<form id="myForm">
  <input type="text" name="phone" />
  <button type="button&quot; onclick="document.getElementById('myForm').reset();">JS重置</button>
</form>