2023我们如何重置HTML表单中的所有输入字段?

 所属分类:web前端开发

 浏览:158次-  评论: 0次-  更新时间:2023-10-07
描述:更多教程资料进入php教程获得。 在本文中,我们将讨论如何重置 HTML 表单中的所有输入字段。在这里,我们使用重置按钮来清除 HTML...
更多教程资料进入php教程获得。

在本文中,我们将讨论如何重置 HTML 表单中的所有输入字段。在这里,我们使用重置按钮来清除 HTML 表单中的输入字段。

在 HTML 表单中,我们使用 标记来获取用户输入。要清除 HTML 表单中的所有输入,请使用带有 type 属性的 标记进行重置。

我们如何重置HTML表单中的所有输入字段?

语法

以下是重置按钮的语法。

<input type="reset">

示例 1

以下示例演示了如何重置 HTML 表单中的所有输入字段。

在此示例中,我们将使用重置按钮清除文本字段中的文本。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Clear all the input in HTML forms</title>
</head>
<body>
   <form>
      <input type="text" name="input" />
      <input type="reset" value="reset" />
   </form>
</body>
</html>

点击重置按钮后,表单被清除。

示例 2

以下示例演示了如何重置 HTML 表单中的所有输入字段。

在此示例中,我们将使用重置按钮清除文本字段中的文本。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>reset example</title>
</head>
<body>
   <form>
      Enter name:</br>
      <input type="text" name="input" /></br>
      Enter Age:</br>
      <input type="text" name="input1" /></br>
      <input type="reset" value="reset" />
   </form>
</body>
</html>

点击重置按钮后,表单被清除。

示例 3

您可以尝试运行以下代码来清除 HTML 表单中的所有输入 -

<!DOCTYPE html>
<html>
<body>
   <form>
      Student Name:<br>
      <input type="text" name="sname">
      <br>
      Student Subject:<br>
      <input type="text" name="ssubject">
      <br>
      <input type="reset" value="reset">
   </form>
</body>
</html>
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!