HTML | DOM 输入重置表单属性

在HTML中，每当用户提交表单时，表单的输入字段中的值都将被发送到服务器。有时，我们希望在用户提交表单后重置表单中的所有输入字段，使它们返回到初始值。HTML提供了一种重置表单字段值的简便方法，即使用<input>元素的type属性设置为"reset"。

示例

以下是一个简单的HTML表单示例，其中包含两个输入字段和一个重置按钮：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" value="John Doe">
  <br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" value="johndoe@example.com">
  <br>
  <button type="reset">重置</button>
</form>

在上面的示例中，type属性为"reset"的按钮充当了重置按钮。当用户单击该按钮时，表单中的所有输入字段的值将重置为初始值。

JavaScript DOM 方法

在JavaScript中，我们还可以使用DOM（文档对象模型）来重置表单属性。

1. 获取表单元素：

const form = document.querySelector('form');

2. 重置表单字段值：

form.reset();

使用上述代码，我们首先使用document.querySelector()方法获取了HTML中的<form>元素。然后，我们使用reset()方法将表单中的所有输入字段值重置为初始值。

兼容性考虑

重置表单属性有一些兼容性问题，特别是在旧版本的Internet Explorer浏览器中。在这些浏览器中，form.reset()方法不会重置隐藏字段的值。因此，如果你的应用程序需要支持这些浏览器，请确保按照以下方式重置表单字段：

form.elements.forEach((element) => {
  element.value = element.defaultValue;
});

上述代码使用了form.elements属性和defaultValue属性来循环遍历表单中的所有字段，并将它们的值重置为初始值。

总结

HTML和DOM提供了多种方法来重置表单字段值。使用HTML的type="reset"属性或JavaScript的form.reset()方法，你可以简单地将表单字段重置为初始值。然而，需要注意一些兼容性问题，特别是在旧版本的Internet Explorer浏览器中。