Javascript 有没有办法将其他html文档中的html表单保存为表？

有没有一种方法可以做到这一点，如果可能的话，有没有一种方法可以引用表单中存储的值，即我想填写表单，然后通过html页面上的按钮调用表单中的值？ 这里只是一个建议，希望这篇文章不会被删除

好的，这是代码，但在我提交表单后，不知何故，到处都是空值。请帮忙

   <form class="container jumbotron">
        <div class="form-row">
          <div class="col-md-4 mb-3">
            <label for="FirstName">First Name</label>
            <input type="text" class="form-control" id="FirstName" name="name" required>
          </div>
          <div class="col-md-4 mb-3">
            <label for="LastName">Last Name</label>
            <input type="text" class="form-control" id="LastName" required>
          </div>
          <div class="col-md-2 mb-3">
              <label for="Age">Age</label>
              <input type="number" class="form-control" id="Age" required>
          </div>
          <div class="col-md-2 mb-3">
            <label for="Sex">Sex</label>
            <select class="custom-select" id="Sex" required>
              <option selected disabled value="">Select gender</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
            </select>
          </div>
    </div>
        <div class="form-row">
            <div class="col-md-3 mb-3">
                <label for="City">Address</label>
                <input type="text" class="form-control" id="Address" required>
              </div>
              <div class="col-md-3 mb-3">
                <label for="PhoneNumber">Phone Number</label>
                <input type="tel" class="form-control" pattern="^\d{3}\d{3}\d{3}$" id="PhoneNumber" required>
              </div>
            <div class="col-md-3 mb-3">
                <label for="Email">Email</label>
                <input type="email" class="form-control" id="Email" name="email" required>
              </div>
            <div class="col-md-3 mb-3">
                <label for="Email">Secondary Email</label>
                <input type="email" class="form-control" id="SecondaryEmail">
              </div>
        </div>
        <div class="form-row">
        <div class="col-md-3 mb-3">
            <label for="date">Birthday</label><br>
            <input type="date" id="Birthday" class="form-control" name="datemax" min="1900-01-01" max="2020-01-01" required>           
          </div>
        </div>

        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="checkbox" required>
            <label class="form-check-label" for="checkbox">
              I agree to terms and conditions
            </label>
          </div>
        </div>
        <button class="btn btn-primary" type="submit" id="submit">Add new contact</button>       
      </form>

---

您想使用

document.ready

事件，它表示页面的DOM现在已经准备好了，因此在html文件的

头中添加

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

你可以做的是在提交时将表单值保存为
cookie
，然后在html页面上从Cookies获取值谢谢你的建议bro，我刚刚找到了解决问题的方法，将使用js对象，因为即使在关闭浏览器后我也需要数据，我需要做的最后一件事是将这些值显示为浏览器中的按钮，而不是原始数据，如果有人知道如何做，最好将其共享。您可以使用Javascript使用持久
cookie
，查看按钮，您需要提取所需的数据，并在
按钮
标记中呈现这些数据（在没有实际查看数据的情况下，不能说太多），数据基本上是字符串、数字值、日期选择器和格式化的电话号码。您指出的帖子很有帮助，但我想到了一些简化的解决方案，因为按钮获取所有值，通过单击html中的同一文档显示它们，按钮的名称是两个字符串（name和lastname）。这些都是细节。不过谢谢你的帮助。我不知道我是否可以在这里添加代码，或者只是编辑问题以获得帮助，我很高兴地说，我解决了存储数据的问题。
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

$(document).ready(function() {
  let list1 = [];

  const addlist1 = event => {
    event.preventDefault();
    let list12 = {
      id: Date.now(),
      FirstName: document.getElementById("FirstName").nodeValue,
      LastName: document.getElementById("LastName").nodeValue,
      Age: document.getElementById("Age").nodeValue,
      Sex: document.getElementById("Sex").nodeValue,
      Address: document.getElementById("Address").nodeValue,
      PhoneNumber: document.getElementById("PhoneNumber").nodeValue,
      Email: document.getElementById("Email").nodeValue,
      SecondaryEmail: document.getElementById("SecondaryEmail").nodeValue
      //Birthday: document.getElementById('Birthday').nodeValue
    };
    list1.push(list12);
    document.forms[0].reset();

    localStorage.setItem("clients", JSON.stringify(list1));
  };

  document.getElementById("submit").addEventListener("click", addlist1);
});