参考资料

1. HTML DOM在下拉列表中选择多个选项
2. HTML DOM 返回表单中的enctype属性的值
3. HTML DOM 返回文档中的链接数
4. HTML DOM 返回文档的标题实例
5. HTML DOM一个单元格的innerHTML
6. HTML DOM将下拉列表变成多行列表
7. HTML DOM改变单元格的内容
8. HTML DOM禁用和启用下拉列表

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