HTML表单重置与JS清空方法解析

2、在JavaScript中获取该表单对象：const form = document.getElementById("myForm");。

3、调用reset方法：form.reset();。

二、遍历表单内所有可编辑元素并清空其值

此方法适用于需要强制清空为完全空白状态（而非初始值），尤其当表单字段的初始value非空，或包含动态设置的默认值时。它绕过HTML初始值限制，对每个支持value属性的元素显式设为空字符串。

1、获取表单对象，例如：const form = document.getElementById("myForm");。

2、获取表单内所有可编辑元素：const inputs = form.querySelectorAll("input, textarea, select");。

3、遍历并清空每个元素：inputs.forEach(el => { if (el.type !== "hidden" && el.type !== "submit" && el.type !== "button") el.value = ""; });。

三、针对特定字段单独赋空值

当仅需清空部分字段（如密码框、搜索框等），而不影响其他已预设或不可更改的字段时，可直接通过ID或name定位目标元素并设置value为空。该方式粒度最细，避免误操作无关控件。

1、为需清空的目标input元素添加唯一id，例如：<input type="text" id="searchInput">。

2、在JavaScript中获取该元素：const searchBox = document.getElementById("searchInput");。

3、将其value设为空：searchBox.value = "";。

四、使用FormData API配合表单重建逻辑

此方法适用于需要在清空前捕获当前数据、或需与AJAX提交联动的场景。它不直接修改DOM，而是通过创建新的FormData实例并重新初始化字段状态，配合手动DOM更新实现逻辑清空。

1、创建FormData对象并传入表单：const formData = new FormData(document.getElementById("myForm"));。

2、遍历formData获取原始键值对（用于审计或回滚）：for (let [key, value] of formData) { console.log(key, value); }。

3、执行清空动作前，先调用reset()或逐项赋空，再重新构建界面状态：document.getElementById("myForm").reset();。

本篇关于《HTML表单重置与JS清空方法解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！