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

---

У меня есть 2 HTML-формы. Когда пользователь вводит данные в 1-ю форму, они должны появиться по умолчанию во 2-й форме. Как мне это сделать

Что я уже пробовал:

<style type="text/css">
HTML code for Form 1:<pre lang="html">body, html {
  height: 100%; font-family: Arial, Helvetica, sans-serif; }

* { box-sizing: border-box; }

.button {
  background-color: white; border: none; padding: 15px 32px; text-align: center;
  text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px;
  cursor: pointer; top:50%; left:50%; border-radius:5px; }

 .bg-img {
  /* The image used */
  background-image: url("login.jpg");
  height: 660px;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Full-width input fields */
input[type=text], input[type=number], input[type=date] {
  width: 100%; padding: 15px; margin: 5px 0 22px 0;
  border: none; background: white;
}

input[type=text]:focus, input[type=number]:focus, input[type=date]:focus {
 background-color: #ddd; outline: none;
 }
</style> 

<!-- form -->
<div class="bg-img">
  <h1> Task Details</h1>
  <form>
    <table>
      <tr>
        <td>
          Audio Length
          <input type="text placeholder="Enter the Audio length" name="al">
        </td>
      </table>
  </form>
</div>

---