重置按钮 HTML

重置按钮是指重置表单字段的值。当用户在表单中输入了一些值，但是想要重新填写时，可以通过点击重置按钮来清空表单的内容。在 HTML 中，可以通过 input 元素来创建重置按钮，并用 type="reset" 来指定按钮类型。

代码示例

下面是一个简单的代码示例，演示如何创建一个重置按钮：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="reset" value="重置">
  <input type="submit" value="提交">
</form>

在这个示例中，我们创建了一个包含两个文本输入框和两个按钮的表单。其中一个按钮的类型为 reset，用于重置表单的值。当用户点击此按钮时，表单中的所有值将被重置为默认值或空值。

需要注意的是，重置按钮需要包含在 form 元素内部，否则会失去作用。

样式调整

重置按钮通常与表单元素一起使用，因此需要与表单样式保持一致。我们可以使用 CSS 对重置按钮进行样式调整，例如修改背景、边框、颜色等。下面是一个简单的 CSS 代码示例：

input[type="reset"] {
  background-color: #EEE;
  border: 1px solid #CCC;
  color: #333;
  padding: 6px 10px;
  cursor: pointer;
}

在这个示例中，我们选中了 type="reset" 的 input 元素，对其进行了背景、边框、颜色等样式的调整。通过修改这些属性，我们可以使重置按钮与表单元素更加协调。

总结

重置按钮是表单中常用的按钮类型之一，它可以方便用户清空表单中的输入值。在 HTML 中，可以通过 input 元素的 type="reset" 属性来创建重置按钮。同时，为了使重置按钮与表单样式保持一致，我们还可以通过 CSS 进行样式调整。