Как получить значение ввода текста по умолчанию из одной html-формы в другую html-форму

Я делаю базовый логин. В одном html файле у меня есть текстовое поле для ввода пользователем email id, после нажатия на кнопку send otp происходит перенаправление на следующий html с email и otp полями, В поле email то, что пользователь вводит на первой html странице, должно автоматически попадать во второе html поле ввода email text box.

Вот моя первая html страница

<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Employee Login </title>
      <link rel="stylesheet" href="{% static 'style.css' %}">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
   <center>
       <h1> </h1>
       <h2> </h2>
       <h3> Employee Feedback Login</h3>
   </center>
      <div class="wrapper">
         <div class="title-text">
            <div class="title login">
               Login
            </div>

         </div>
         <div class="form-container">
            <div class="form-inner">
               <form action="" method="post" class="login">
                  {% csrf_token %}
                  <div class="field">
                     <input id = "Employee_Mail" type="text" 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>

            </div>
         </div>
      </div>
   </body>
</html>

и мой редирект (вторая html страница)

<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Employee Login </title>
      <link rel="stylesheet" href="{% static 'style.css' %}">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
   <center>
       <h1></h1>
       <h2> </h2>
       <h3> Employee Feedback Login</h3>
   </center>
      <div class="wrapper">
         <div class="title-text">
            <div class="title login">
               Login
            </div>

         </div>
         <div class="form-container">
            <div class="form-inner">
               <form action="validate/" method="post" class="Validate OTP">
                  {% csrf_token %}
                  <div class="field">
                     <input type="text" id= "mail" placeholder="Email Address" name="Employee_Mail" required>
                  </div>
                  <div class="field">
                     <input type="text" placeholder="Otp" name="otp" required>
                  </div>
                  <div class="field btn">
                     <div class="btn-layer"></div>
                     <input type="submit" value="Validate otp">
                  </div>
               </form>
               <script>

               </script>
            </div>
         </div>
      </div>
   </body>
</html>

Пожалуйста, помогите мне, я новичок в HTML Заранее спасибо!

Вы можете достичь этого несколькими способами. Вы можете использовать фронт-энд и серверную часть.

Итак, я предлагаю вам на стороне клиента. На стороне клиента также есть много способов достичь этого (локальное хранение, хранение сессии, параметры запроса и т.д.).

На первой html-странице вы можете сохранить электронную почту в локальном хранилище с помощью javascript. `

    <script>
        

        const form = document.getElementById('form');
        const loginSubmit = (e) => {
            const email = document.getElementById("Employee_Mail").value
            localStorage.setItem('email', email)
        }

        form.addEventListener('submit', loginSubmit);
        </script>`

Во второй HTML-странице добавьте следующее

window.onload = () => {

        document.getElementById("mail").value = localStorage.getItem("mail");
    }
Вернуться на верх