参考资料

1. HTML DOM在下拉列表中选择多个选项
2. HTML DOM 返回加载的文档的服务器域名 实例
3. HTML DOM 被按下的键盘键的keycode？
4. HTML DOM改变下拉列表中被选中的选项的文本
5. HTML DOM 返回和设置链接的hreflang属性实例
6. HTML DOM改变表格边框的宽度
7. HTML DOM 修改 HTML 内容
8. HTML DOM 访问

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;
}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。