How to get default text input value from one html to other html form

I'm doing basic login. In one html file I have user input email id text box, once click on send otp button that will redirect to next html with email and otp fields, In email field what ever user gives input in first html page that should automatically get into second html email input field text box.

Here is my first html page

<!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>

and my redirect(second html page)

<!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>

Please help me out I'm new to HTML Thanks in advance!.

You can achieve several ways. you can do using front end side and also server side.

So, i am giving you in client side. In client side have also many ways to achieve this (local storage,session storage, query params etc).

In First html page you can save email in local storage using 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>`

In Second HTML page in add this

window.onload = () => {

        document.getElementById("mail").value = localStorage.getItem("mail");
    }
Back to Top