javascript表单重置,js修改表单的值

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

表单重置是指将表单中的所有输入字段的值重置为它们的初始值。在JavaScript中，可以使用form.reset()方法来实现表单重置。

需要获取到要重置的表单元素。可以通过document.getElementById()方法或者document.forms属性来获取表单元素的引用。然后，调用表单元素的reset()方法即可将表单重置为初始状态。

示例代码如下：


<!DOCTYPE html>
<html>
<body>
<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" value="John"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" value="john@example.com"><br><br>
  <input type="button" value="Reset" onclick="resetForm()">
</form>
<script>
function resetForm() {
  document.getElementById("myForm").reset();
}
</script>
</body>
</html>

在上述示例中，我们创建了一个包含两个输入字段（姓名和电子邮件）和一个重置按钮的表单。当点击重置按钮时，会调用resetForm()函数，该函数通过getElementById()方法获取到表单元素的引用，并调用reset()方法将表单重置为初始状态。

需要注意的是，表单重置会将所有输入字段的值都重置为它们的初始值，而不仅仅是清空输入字段的内容。初始值是指在HTML中定义输入字段时通过value属性指定的值。如果没有为输入字段指定初始值，则重置后的值将为空。

表单重置还会还原表单中的其他属性，例如被禁用的输入字段将变为可用状态，被隐藏的输入字段将重新显示等。

总结一下，通过调用表单元素的reset()方法可以实现JavaScript中的表单重置。该方法会将表单中的所有输入字段的值重置为它们的初始值，并还原其他属性。在实际应用中，可以根据需要使用reset()方法来实现表单的重置功能。

需要注意的是，表单重置只会重置表单元素的值，不会重置表单的样式。如果需要同时重置表单的样式，可以通过JavaScript代码来修改表单的样式属性，例如将输入字段的背景色、边框样式等重置为默认值。

javascript表单重置,js修改表单的值

相关阅读