html 表单如何记录和显示最近值，举例说明下

HTML表单可以通过使用JavaScript来记录和显示最近的提交值。可以使用localStorage来保存表单值，然后在页面加载时将该值显示在表单中。例如：

HTML代码：

<form id="myForm">
  <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="submit" value="提交">
</form>

JavaScript代码：

// 获取表单元素
const form = document.getElementById("myForm");

// 当表单被提交时，保存表单值
form.addEventListener("submit", (event) => {
  event.preventDefault(); // 阻止表单默认提交行为

  const name = form.elements["name"].value;
  const email = form.elements["email"].value;

  // 保存表单值到localStorage
  localStorage.setItem("name", name);
  localStorage.setItem("email", email);
});

// 页面加载时，将表单最近的值显示出来
window.addEventListener("load", () => {
  const name = localStorage.getItem("name");
  const email = localStorage.getItem("email");

  // 设置表单元素的值
  form.elements["name"].value = name;
  form.elements["email"].value = email;
});

这段代码将表单的"name"和"email"值保存到localStorage中，然后在页面加载时将它们显示在表单中。这样，用户就可以看到最近一次提交的值，并且可以再次提交时使用这些值。