如何将一个HTML表单的输入值自动填充到另一个HTML表单？

你可以通过两种方式实现需求，下面分别给出适合新手的操作步骤：

方法一：前端URL参数传递（快速实现） #

这种方法无需后端逻辑修改，直接通过URL携带邮箱参数，在第二个页面读取并填充。

第一步：修改第一个页面的表单 #

把表单提交方法改为GET，并指定跳转的第二个页面路径（比如假设第二个页面的访问路径是/verify-otp/）：

<form action="/verify-otp/" method="get" class="login">
  <!-- GET请求无需CSRF令牌，可移除{% csrf_token %} -->
  <div class="field">
    <!-- 建议把type改为email，更符合输入规范 -->
    <input id="Employee_Mail" type="email" placeholder="Email Address" name="Employee_Mail" required>
  </div>
  <div class="field btn">
    <div class="btn-layer"></div>
    <input type="submit" value="Send OTP">
  </div>
</form>

第二步：在第二个页面添加JS代码读取参数 #

在第二个页面的<script>标签中加入以下代码，页面加载时自动读取URL中的邮箱并填充：

<script>
// 从URL中获取指定参数的函数
function getUrlParam(paramName) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(paramName);
}

// 页面加载完成后执行
window.onload = function() {
  const email = getUrlParam('Employee_Mail');
  if (email) {
    const emailInput = document.getElementById('mail');
    emailInput.value = email;
    // 可选：设置输入框为只读，防止用户修改邮箱
    emailInput.readOnly = true;
  }
}
</script>

方法二：后端Django处理（更安全，适合实际项目） #

因为你的代码是Django模板，推荐用这种后端传递的方式，避免邮箱暴露在URL中。

第一步：修改第一个页面的表单action #

指定表单提交到Django的视图URL（先提前在urls.py中配置好视图路径）：

<form action="{% url 'send_otp' %}" method="post" class="login">
  {% csrf_token %}
  <div class="field">
    <input id="Employee_Mail" type="email" placeholder="Email Address" name="Employee_Mail" required>
  </div>
  <div class="field btn">
    <div class="btn-layer"></div>
    <input type="submit" value="Send OTP">
  </div>
</form>

第二步：编写Django视图函数 #

在views.py中添加两个视图，分别处理发送OTP请求和验证页面渲染：

from django.shortcuts import render, redirect

def send_otp(request):
    if request.method == 'POST':
        email = request.POST.get('Employee_Mail')
        # 此处可添加发送OTP的逻辑（比如调用邮件/短信接口）
        # 重定向到验证页面，携带邮箱参数
        return redirect('verify_otp', email=email)
    # GET请求返回登录页面
    return render(request, '你的第一个页面模板名.html')

def verify_otp(request, email):
    # 将邮箱传递给验证页面模板
    return render(request, '你的第二个页面模板名.html', {'employee_email': email})

第三步：配置Django路由 #

在urls.py中添加对应的URL映射：

from django.urls import path
from . import views

urlpatterns = [
    path('login/', views.send_otp, name='send_otp'),
    path('verify-otp/<str:email>/', views.verify_otp, name='verify_otp'),
]

第四步：修改第二个页面的邮箱输入框 #

直接用Django模板变量填充邮箱值：

<div class="field">
  <input type="email" id="mail" placeholder="Email Address" name="Employee_Mail" value="{{ employee_email }}" required readonly>
</div>

内容的提问来源于stack exchange，提问作者Karthik Reddy