HTML resetfields使用详解

HTML 是一种用于创建网页的标记语言，它通过使用不同的标签来定义网页的结构和内容。其中，<form> 元素用于创建 HTML 表单，而 <input> 元素是最常用的表单元素之一。

<input> 元素有多种类型，其中之一是 “reset” 类型。在本文中，我们将详细讨论 <input type="reset"> 元素，并解释如何正确使用它来重置表单字段。

什么是 `<input type="reset">` 元素

<input type="reset"> 元素是 HTML 中用于创建重置按钮的一种方式。当用户单击重置按钮时，它将恢复表单字段的默认值。这对于让用户轻松地还原表单字段非常有用。

如何使用 `<input type="reset">` 元素

要使用 <input type="reset"> 元素，只需在 <form> 元素内部插入以下代码：

<form>
  <!-- 表单字段 -->
  <input type="text" name="fname" placeholder="名字"><br>
  <input type="text" name="lname" placeholder="姓氏"><br>

  <!-- 重置按钮 -->
  <input type="reset" value="重置">
</form>

在上面的示例中，我们创建了一个包含两个文本输入字段和一个重置按钮的表单。

在表单字段方面，我们创建了两个文本输入字段：一个用于名字，一个用于姓氏。这些字段的初始值将由用户填写。

然后，在表单中添加了一个重置按钮，其中 type 属性的值设置为 “reset”。按钮上显示的文本是 “重置”。当用户单击此按钮时，表单字段的值将被重置为它们的默认值。

示例代码运行结果

现在，我们来运行上面的示例代码，以查看 <input type="reset"> 元素的实际效果。

<!DOCTYPE html>
<html>
<head>
  <title>重置按钮示例</title>
</head>
<body>
<form>
  <!-- 表单字段 -->
  <input type="text" name="fname" placeholder="名字"><br>
  <input type="text" name="lname" placeholder="姓氏"><br>

  <!-- 重置按钮 -->
  <input type="reset" value="重置">
</form>
</body>
</html>

执行上述代码后，我们将在浏览器中看到一个包含表单字段和一个重置按钮的页面。当我们输入一些文本并点击 “重置” 按钮时，表单字段的值将被还原为它们的默认值。

改变重置字段的默认值

如果我们希望自定义重置按钮重置字段之后的值，可以使用 JavaScript 来实现。下面是一个示例代码，将 “重置” 按钮的行为更改为将字段值重置为特定值。

<!DOCTYPE html>
<html>
<head>
  <title>重置按钮示例</title>
  <script>
    function resetFields() {
      document.getElementById("fname").value = "默认名字";
      document.getElementById("lname").value = "默认姓氏";
    }
  </script>
</head>
<body>
<form>
  <!-- 表单字段 -->
  <input type="text" id="fname" name="fname" placeholder="名字"><br>
  <input type="text" id="lname" name="lname" placeholder="姓氏"><br>

  <!-- 重置按钮 -->
  <input type="reset" value="重置" onclick="resetFields()">
</form>
</body>
</html>

在上述示例代码中，我们添加了一个名为 resetFields() 的 JavaScript 函数。该函数使用 document.getElementById() 方法来获取字段的引用，并将其值设置为特定的值。在这种情况下，我们将字段值重置为 “默认名字” 和 “默认姓氏”。

按钮的 onclick 属性设置为 resetFields()，以便在用户单击 “重置” 按钮时调用此函数。当用户单击该按钮时，表单字段的值将被重置为 “默认名字” 和 “默认姓氏”。