html reset 重置按钮

在HTML中，<input type="reset">是一个表单控件，它用于重置表单中的所有输入字段到它们的初始值，这个元素通常用于当用户点击“重置”按钮时，清空表单中的所有数据，下面我们详细介绍一下<input type="reset">的使用方法和相关属性。

使用方法

1、在HTML表单中添加<input type="reset">标签：

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

2、<input type="reset">标签会自动应用默认样式，无需设置CSS样式，如果需要自定义样式，可以使用其他标签(如<button>)包裹<input type="reset">,并设置相应的样式。

相关属性

1、disabled属性：禁用或启用表单控件，默认情况下，<input type="reset">是启用的，如果需要禁用它，可以在<input>标签中添加disabled属性。

<input type="reset" disabled>

2、value属性：设置表单控件的提示文本，默认情况下，提示文本为空。

<input type="reset" value="点击此处重置表单">

3、style属性：设置表单控件的样式。

<input type="reset" style="width: 50px; height: 30px;">

相关问题与解答

1、如何使用JavaScript在点击“重置”按钮时清空表单数据？

答：可以使用以下JavaScript代码实现：

document.querySelector('form').addEventListener('reset', function() {
  this.querySelectorAll('input').forEach(function(input) {
    input.value = '';
  });
});

这段代码会在表单被重置时遍历所有输入框，并将它们的值设置为空字符串。