HTML 清除表单

在编写 HTML 表单时，我们经常需要在用户提交表单后将其重置。这时候我们可以使用 "input type='reset'" 属性来实现表单重置。不过，这个属性不能够完全清除表单的所有内容，比如通过 JavaScript 动态添加的输入框内容不会被清除。为了解决这个问题，我们需要编写一些 JavaScript 代码来清除所有表单内容。

下面介绍一下如何实现通过 JavaScript 清除表单内容。

第一种方法

这种方法比较简单，只需要使用遍历所有表单元素并将其值设置为空即可。

document.getElementById("formId").reset();

或者：

var form = document.getElementById("formId");
var elements = form.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].value = '';
}

第二种方法

第二种方法是在 HTML 中使用 button 元素来触发 JavaScript 函数，这个函数将会清除所有表单内容。

function clearForm() {
    var form = document.getElementById("formId");
    var elements = form.elements;
    for (var i = 0, len = elements.length; i < len; ++i) {
        elements[i].value = '';
    }
}

<button type="button" onclick="clearForm()">Clear Form</button>

两种方法的比较

第一种方法更为简单，只需要一行代码即可清除所有表单内容。但是，需要注意的是，有些浏览器可能不支持该方法。

第二种方法需要在 HTML 中添加额外的代码，增加了 HTML 文件大小，但是可以保证代码在所有浏览器中均可用。

无论哪种方法，都可以实现表单内容的清除。根据实际需要选择合适的方法即可。

以上就是如何通过 JavaScript 清除表单内容的方法，相信这篇文章对于 Web 开发者来说是非常有用的。

返回的代码片段

# HTML 清除表单

在编写 HTML 表单时，我们经常需要在用户提交表单后将其重置。这时候我们可以使用 "input type='reset'" 属性来实现表单重置。不过，这个属性不能够完全清除表单的所有内容，比如通过 JavaScript 动态添加的输入框内容不会被清除。为了解决这个问题，我们需要编写一些 JavaScript 代码来清除所有表单内容。

下面介绍一下如何实现通过 JavaScript 清除表单内容。

## 第一种方法

这种方法比较简单，只需要使用遍历所有表单元素并将其值设置为空即可。

```javascript
document.getElementById("formId").reset();

或者：

var form = document.getElementById("formId");
var elements = form.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].value = '';
}

第二种方法

第二种方法是在 HTML 中使用 button 元素来触发 JavaScript 函数，这个函数将会清除所有表单内容。

function clearForm() {
    var form = document.getElementById("formId");
    var elements = form.elements;
    for (var i = 0, len = elements.length; i < len; ++i) {
        elements[i].value = '';
    }
}

<button type="button" onclick="clearForm()">Clear Form</button>

两种方法的比较

第一种方法更为简单，只需要一行代码即可清除所有表单内容。但是，需要注意的是，有些浏览器可能不支持该方法。

第二种方法需要在 HTML 中添加额外的代码，增加了 HTML 文件大小，但是可以保证代码在所有浏览器中均可用。

无论哪种方法，都可以实现表单内容的清除。根据实际需要选择合适的方法即可。

以上就是如何通过 JavaScript 清除表单内容的方法，相信这篇文章对于 Web 开发者来说是非常有用的。