JavaScript 中的重置按钮

本文将学习如何使用 JavaScript 的 reset 按钮重置表单。

在 JavaScript 中使用 reset 重置表单

在网页上使用表单填写所需的详细信息，然后发送到服务器进行处理。表单也称为 Web 表单或 HTML 表单。

所使用的表格示例广泛用于电子商务网站、网上银行和调查等。

典型的表单控件对象包括：

1. 用于输入一行文本的文本框。
2. 用于选择动作的按钮。
3. 一个单选按钮，用于从一组选项中进行选择。
4. 用于启用或禁用单个独立选项的复选框。

reset 类型的输入元素显示为按钮，默认 click 事件处理程序将所有表单输入重置为其初始值。这个输入元素只支持两个属性：类型和值。

值是可选属性。要确保的一件重要事情是输入元素在表单元素内；否则，它将无法正常工作。

它不接受参数值，也不返回任何值。它可用于设置默认值。

例子：

<form name="form1">
  <input type='text' id="phoneNumber" name='text1'/>
  <input type="reset" onclick="resetForm()" value="Reset form"/>
  <button type="submit" name="submit" onclick="submitForm()">Submit</button>
</form>

function submitForm() {
    console.log("Form submitted");
}

function resetForm() {
console.log("Reset form");
}

我们在上面的代码中定义了表单元素，它将 first name 作为输入。

我们给出了两个按钮：reset 按钮将清除表单，submit 按钮将把整个表单提交到服务器以进一步处理它。

输出：

如果你想创建自定义按钮并使用 JavaScript 自定义行为，则必须使用 <input type="button">，甚至更好的是 <button> 元素。JavaScript 还提供了一个内置的 reset() 方法来重置整个表单。

你可以通过其 ID 选择表单元素并使用 reset() 重置它。有关详细信息，请参阅 reset 方法文档。