参考资料

1. HTML DOM 哪个元素被按下了？
2. HTML DOM弹出下拉列表中所有选项
3. HTML DOM 访问
4. HTML DOM 属性
5. HTML DOM 鼠标的坐标？
6. HTML DOM 返回图像映射某个区域的坐标实例
7. HTML DOM 返回和设置一个iframe中的scrolling属性的值
8. HTML DOM 返回一个表单中所有元素的value 实例

HTML DOM 表单重置

详细介绍

HTML DOM 提供了重置表单的功能，可以将表单中的所有输入字段恢复到它们的初始值。

相关标签

• <form> - 定义表单

• <input type="reset"> - 重置按钮

• <button type="reset"> - 重置按钮

用法

有两种主要方法可以重置表单：

1. 使用内置的重置按钮：

<input type="reset" value="重置表单">

2. 使用 JavaScript 的 reset() 方法：

document.getElementById("myForm").reset();

实例

<form id="myForm">
  姓名: <input type="text" name="name" value="初始值"><br>
  邮箱: <input type="email" name="email"><br>
  <input type="reset" value="重置">
  <button type="button" onclick="resetForm()">JS重置</button>
</form>

<script>
function resetForm() {
  document.getElementById("myForm").reset();
}
</script>

功能

• 将所有表单字段恢复为初始值

• 清除用户输入

• 重置单选按钮和复选框的选择状态

• 重置下拉菜单到默认选项

CSS 扩展

可以为重置按钮添加样式：

input[type="reset"], button[type="reset"] {
  background-color: #f44336;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="reset"]:hover, button[type="reset"]:hover {
  background-color: #d32f2f;
}