温馨提示×

重置按钮

重置按钮是HTML 5表单中的一种按钮,用于将表单中的所有字段重置为它们的初始值。在用户点击重置按钮时,表单中的所有输入字段将被清空,并且表单将返回到最初状态。

要在表单中添加重置按钮,您可以使用以下的HTML代码:

<form>
  <!-- 表单字段 -->
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  
  <!-- 重置按钮 -->
  <input type="reset" value="重置">
</form>

在上面的示例中,我们在表单中添加了一个重置按钮,它的类型是"reset",并且显示的文本是"重置"。当用户点击这个按钮时,表单字段中的数据将被清空。

另外,您还可以通过CSS样式来美化重置按钮,例如改变按钮的颜色、大小、边框等等。以下是一个示例:

<style>
  input[type="reset"] {
    background-color: #f44336;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

通过上面的CSS代码,我们将重置按钮的背景颜色设为红色,文字颜色设为白色,设置了一些内边距、边框和圆角,还修改了鼠标指针样式,使其在悬停时变成手型。

总的来说,重置按钮是一个很方便的功能,可以允许用户在填写表单时有机会清空所有已填写的数据,返回到最初状态。您可以根据具体的设计需求来改变重置按钮的样式和行为。