JavaScript form.reset()
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 form.reset() 方法。此方法对于表单处理至关重要，它允许开发人员通过一次函数调用将表单字段重置为其默认值。
基本定义
reset() 方法会将所有表单控件重置为其初始值。此方法执行的操作与单击表单的重置按钮相同。
调用时，它会清除所有用户输入，并将表单字段恢复到其默认状态。这包括文本输入、复选框、单选按钮和下拉菜单。
基本 form.reset()
此示例演示了如何使用 JavaScript 重置简单表单。
<!DOCTYPE html>
<html>
<head>
<title>Basic form.reset()</title>
</head>
<body>
<form id="myForm">
<input type="text" value="Default">
<input type="checkbox" checked>
<button type="button" onclick="resetForm()">Reset Form</button>
</form>
<script>
function resetForm() {
document.getElementById('myForm').reset();
}
</script>
</body>
</html>
在此基本示例中，我们有一个包含文本输入和复选框的表单。当单击按钮时，JavaScript 代码会重置表单，将所有字段恢复到其初始值。
reset() 方法在表单元素上调用，我们使用 getElementById 访问该表单元素。这展示了表单重置功能最简单的用法。
重置特定表单字段
此示例显示如何在不更改其他字段的情况下重置特定字段。
<!DOCTYPE html>
<html>
<head>
<title>Partial Form Reset</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" placeholder="Username">
<input type="email" id="email" placeholder="Email">
<select id="country">
<option value="">Select country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
<button type="button" onclick="resetUsername()">Reset Username</button>
<button type="button" onclick="resetForm()">Reset All</button>
</form>
<script>
function resetUsername() {
document.getElementById('username').value = '';
}
function resetForm() {
document.getElementById('userForm').reset();
}
</script>
</body>
</html>
这里我们有一个包含多个字段和两个重置按钮的表单。一个按钮仅重置用户名字段，而另一个按钮重置整个表单。
这展示了重置单个字段与使用 reset() 方法之间的区别。完全重置会将所有字段恢复到其默认值，不一定是空值。
提交后重置表单
此示例演示了在成功提交后重置表单。
<!DOCTYPE html>
<html>
<head>
<title>Post-Submission Reset</title>
</head>
<body>
<form id="contactForm" onsubmit="handleSubmit(event)">
<input type="text" id="name" placeholder="Your Name" required>
<textarea id="message" placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
<script>
function handleSubmit(event) {
event.preventDefault();
// Simulate form processing
setTimeout(() => {
alert('Form submitted successfully!');
document.getElementById('contactForm').reset();
}, 1000);
}
</script>
</body>
</html>
在此示例中，表单在模拟提交过程后被重置。在显示成功消息后调用 reset() 方法。
此模式在 AJAX 表单提交中很常见，您希望在服务器处理成功后清除表单，同时保持页面状态。
使用默认值重置表单
此示例显示 reset 如何与不同的默认值配合使用。
<!DOCTYPE html>
<html>
<head>
<title>Default Values Reset</title>
</head>
<body>
<form id="settingsForm">
<input type="text" value="Admin">
<input type="range" min="0" max="100" value="50">
<select>
<option value="light">Light Theme</option>
<option value="dark" selected>Dark Theme</option>
</select>
<button type="button" onclick="resetSettings()">Reset to Defaults</button>
</form>
<script>
function resetSettings() {
document.getElementById('settingsForm').reset();
}
</script>
</body>
</html>
此表单包含具有各种默认值的字段。重置按钮会将所有字段恢复到这些预定义的默认值，而不是空值。
reset() 方法在恢复表单状态时会尊重原始 HTML 属性，例如 value、checked 和 selected。
自定义重置确认
此示例在重置表单之前添加了确认对话框。
<!DOCTYPE html>
<html>
<head>
<title>Confirm Reset</title>
</head>
<body>
<form id="surveyForm">
<textarea placeholder="Your feedback"></textarea>
<button type="button" onclick="confirmReset()">Clear Form</button>
</form>
<script>
function confirmReset() {
if (confirm('Are you sure you want to clear all your answers?')) {
document.getElementById('surveyForm').reset();
}
}
</script>
</body>
</html>
这里我们使用 confirm() 对话框来防止意外重置表单。只有当用户确认其意图时，表单才会重置。
这对于用户可能花费大量时间输入数据的表单来说是一个好习惯，可以防止意外的数据丢失。
来源
在本文中，我们展示了如何在 JavaScript 中使用 form.reset() 方法。此方法对于 Web 应用程序中的表单处理和用户体验至关重要。
作者
列出 所有 JS DOM 教程。