Form reset() 方法

什么是 Form reset() 方法

reset() 方法是 HTML Form 对象的一个方法，用于将表单中的所有输入字段重置为它们的初始值。这意味着，所有的输入框、单选框、复选框、下拉框等元素将会被重置为它们最初加载时的值。

如何使用 Form reset() 方法

要使用 reset() 方法，首先需要获取到表单的 DOM 元素，然后调用该方法即可。以下是一个简单的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Form Reset Example</title>
</head>
<body>
    <form id="myForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br><br>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        
        <input type="submit" value="Submit">
        <input type="button" value="Reset" onclick="resetForm()">
    </form>

    <script>
        function resetForm() {
            document.getElementById("myForm").reset();
        }
    </script>
</body>
</html>

在上面的示例代码中，我们首先定义了一个包含两个输入框和两个按钮的表单。其中一个按钮的点击事件会触发 resetForm() 方法，该方法会调用表单的 reset() 方法，从而将所有输入字段重置为它们的初始值。

注意事项

• 使用 reset() 方法会将表单中的所有输入字段重置为它们的初始值，这可能会导致用户输入的数据丢失，请谨慎使用。
• reset() 方法不会重置隐藏字段（type="hidden"）和按钮（type="button"）。

结语

通过本文的介绍，你应该对 Form reset() 方法有了更深入的了解。在实际开发中，当需要重置表单中的输入字段时，可以考虑使用该方法。记得在使用时注意一些注意事项，以免造成不必要的困扰。祝你在 Web 前端开发的道路上越走越远！