在前端开发中，我们经常需要创建表单来收集用户数据。当用户提交表单时，我们通常需要清空表单中的输入字段以便下一次使用该表单时不会因为之前的数据而出现错误。
在本文中，我们将介绍如何通过 JavaScript 在表单提交时清空输入字段，并提供一个示例代码来演示这个方法。
用 JavaScript 清空输入字段
为了在表单提交时清除输入字段，我们可以使用 JavaScript。具体来说，我们可以编写一个函数来遍历表单中的所有输入字段，并将它们的值设置为空字符串。然后，在表单的 submit 事件被触发时，我们可以调用此函数以清除所有输入字段的值。
以下是一个示例函数，可用于清除表单中所有输入字段的值：
-- -------------------- ---- -------
-------- --------------------- -
----- ------ - -----------------------------------
--- ---- - - -- - - -------------- ---- -
----- ----- - ----------
-- ----------- --- ------ -- ---------- --- ------- -- ---------- --- ----------- -
----------- - ---
-
-
-此函数接受一个表单元素作为参数，并使用 getElementsByTagName 方法获取该表单中所有的 <input> 元素。然后，它使用一个循环来遍历每个输入字段并将其值设置为空字符串（注意，这里只清空了类型为文本、电子邮件或密码的字段）。
为了在提交表单时调用此函数，我们可以将其添加到表单的 submit 事件监听器中：
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
clearFormInputs(form);
});这将使表单在提交时自动调用 clearFormInputs 函数，并清空所有输入字段的值。
总结
在本文中，我们介绍了如何使用 JavaScript 在表单提交时清空输入字段。我们编写了一个简单的函数来遍历表单中的所有输入字段，并将它们的值设置为空字符串。然后，我们将此函数添加到表单的 submit 事件监听器中以便在提交表单时自动调用它。
这是一个非常简单却实用的技巧，在前端开发中非常有用。当用户需要多次使用同一个表单时，这个技巧可以帮助避免因之前输入的数据而导致错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28995