HTML页面自动填充邮箱方法解析

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《HTML 页面间自动填充邮箱字段方法》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

本文介绍如何将用户在第一个登录页输入的邮箱地址，通过前端方式（如 localStorage）传递到第二个 OTP 验证页，并自动填充到对应输入框中，无需后端参与，适合初学者快速实现。

要在两个独立的 HTML 页面之间传递表单数据（例如邮箱），最轻量、易上手的方案是使用浏览器提供的 localStorage —— 它允许你在当前域名下持久化保存字符串数据，且页面跳转后仍可读取。

✅ 实现步骤详解

第一步：在首页（登录页）保存邮箱值

你需要为表单添加 id="loginForm"（便于 JS 获取），并在提交前将邮箱存入 localStorage。注意：原代码中表单未设 ID，需补充；同时建议阻止默认提交行为（避免未保存就跳转），改用 window.location.href 显式跳转：

<!-- 在第一个 HTML 的 <form> 标签中添加 id -->
<form id="loginForm" action="" method="post" class="login">
  {% csrf_token %}
  <div class="field">
    &lt;input id=&quot;Employee_Mail&quot; type=&quot;text&quot; placeholder=&quot;Email Address&quot; name=&quot;Employee_Mail&quot; required&gt;
  </div>
  <div class="field btn">
    <div class="btn-layer"></div>
    &lt;input type=&quot;submit&quot; value=&quot;Send OTP&quot;&gt;
  </div>
</form>

<script>
  document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认提交，确保 JS 执行完成
    const email = document.getElementById('Employee_Mail').value.trim();
    if (email) {
      localStorage.setItem('userEmail', email); // 建议用语义化 key，如 'userEmail'
      window.location.href = 'second.html'; // 替换为你实际的第二页路径（如 validate.html）
    } else {
      alert('请输入有效的邮箱地址');
    }
  });
</script>

⚠️ 注意：localStorage 是同源（协议+域名+端口）存储，确保两页在同一域名下（如都为 http://localhost:8000/），否则无法读取。

第二步：在第二页（OTP 页）自动填充邮箱

为邮箱输入框设置 id="mail"（你已存在），然后在页面加载完成后从 localStorage 中读取并赋值：

<!-- 确保第二页的邮箱 input 有 id="mail"（你已有） -->
&lt;input type=&quot;text&quot; id=&quot;mail&quot; placeholder=&quot;Email Address&quot; name=&quot;Employee_Mail&quot; required&gt;

<script>
  window.addEventListener('DOMContentLoaded', () => {
    const savedEmail = localStorage.getItem('userEmail');
    if (savedEmail) {
      document.getElementById('mail').value = savedEmail;
    }
  });
</script>

✅ 推荐使用 DOMContentLoaded 而非 window.onload，因前者在 DOM 构建完成即触发，不等待图片等资源，响应更快。

? 其他可行方案对比（简要）

✅ 最佳实践建议

• 始终校验输入：前端保存前检查邮箱格式（可用正则 /^\S+@\S+\.\S+$/）；
• 清理冗余数据：OTP 验证成功后，建议调用 localStorage.removeItem('userEmail') 避免残留；
• 兼容性兜底：可增加 try...catch 包裹 localStorage 操作，防止隐私模式下报错；
• 无障碍友好：自动填充后，确保焦点可到达该输入框（如 document.getElementById('mail').focus()）。

通过以上方式，你就能在不依赖后端的前提下，流畅实现跨页表单数据传递——简洁、可靠，且完全符合现代 Web 开发规范。

今天关于《HTML页面自动填充邮箱方法解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！