怎么用HTML插入表单提交提示_HTML表单提交状态反馈

<form id="myForm">
  <label>姓名：<input type="text" name="name" required></label><br>
  <label>邮箱：<input type="email" name="email" required></label><br>
  <button type="submit">提交</button>
</form>

<div id="feedback"></div>

<script>
document.getElementById("myForm").addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止默认提交

  const feedback = document.getElementById("feedback");
  
  // 简单验证
  const name = this.name.value.trim();
  const email = this.email.value.trim();

  if (name && email) {
    feedback.innerHTML = "<strong style='color: green;'>✅ 提交成功！</strong>";
    this.reset(); // 可选：清空表单
  } else {
    feedback.innerHTML = "<strong style='color: red;'>❌ 请填写所有字段。</strong>";
  }
});
</script>

feedback.innerHTML = "⏳ 正在提交...";
// 模拟异步请求
setTimeout(() => {
  feedback.innerHTML = "<strong style='color: green;'>✅ 数据已保存！</strong>";
}, 1500);

<style>
#feedback {
  margin-top: 10px;
  padding: 8px;
  border-radius: 4px;
}
</style>