以下是一个简单的例子，演示如何在 HTML 和 JavaScript 中使用重置按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>重置按钮示例</title>
</head>
<body>
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" value="John">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" value="john@example.com">
<button type="button" onclick="displayFormData()">显示表单数据</button>
<input type="reset" value="重置">
</form>
<script>
function displayFormData() {
// 获取表单中的数据
var form = document.getElementById('myForm');
var formData = new FormData(form);
// 显示表单数据
for (var pair of formData.entries()) {
console.log(pair[0] + ': ' + pair[1]);
}
}
</script>
</body>
</html>
在这个例子中，我们创建了一个包含文本输入框、电子邮件输入框、一个按钮和一个重置按钮的简单 HTML 表单。通过 JavaScript 函数 displayFormData，我们获取表单中的数据，并通过控制台输出。
请注意，重置按钮会将表单中的所有输入字段的值重置为它们的初始值。在实际应用中，你可能需要谨慎使用重置按钮，以确保用户的数据不会被意外清除。
转载请注明出处：http://www.zyzy.cn/article/detail/6218/JavaScript 和 HTML DOM