如何从表单中获取信息并将其放入包含 HTML、CSS 和 Javascript 的表中？

Question

我是 HTML/CSS/JS 的新手，我想知道如何从表单中获取信息并将其存储在表格中。

例如，用户将在表单中输入他们的姓名并按下创建按钮。 这将创建一个包含用户名的表。 但是，即使在刷新选项卡后，我也希望数据保留在表中。 我相信这需要一台服务器。 请指出我正确的方向。 下面是我的 HTML 后面是我的 JS。

澄清：当标签刷新时，其他访问该网站的人应该能够看到用户输入的表格中的数据。 每次用户在表格上按回车键时，它应该添加一个新行而不删除前一行。

我相信我必须使用服务器，所以任何人都可以告诉我如何将它与我想要做的事情一起使用，如上所述？ 谢谢！

HTML

<form>
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"<br>
</form>


JS

function refresh() {
    var table = document.getElementById("infotable");
    let row = table.insertRow(1);
    let cell1 = row.insertCell(0);
    cell1.innerHTML = document.getElementById("name").value;
}

Answer 1

如果您想要长期存储，是的，您需要使用某种带有数据库的后端解决方案。 但是，还有其他选项，例如 cookies 和 localStorage。

由于安全限制，这在此处的代码段中不起作用，但它会将用户输入保留在 localStorage 中，并在他们每次访问页面时显示它们

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

<form onsubmit='do_fn()'>
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"<br>
        <button type='submit'>submit</button>
</form>

<div class='showname' hidden>Your name is <span></span></div>

<script>
  function do_fn() {
    localStorage.setItem('name', document.querySelector('#name').value);
  }

  // here is where you can detect it when they come back.
  window.addEventListener('DOMContenetLoaded', function() {
    let n = localStorage.getItem('name');
    let d = document.querySelector('.showname')
    if (n && n!='')  {
      d.removeAttribute('hidden');
      d.querySelector('span').innerText = n;
    }
  })
</script>

Answer 2

好吧，实际上你不需要服务器。 您可以将数据保存在localStorage中。 看看这个评论的例子：

 const result = document.getElementById("result"); const saved = localStorage.getItem("save"); // get saved items if (saved) { const t = `<table> <tr> <th>Name</th> <th>Age</th> <th>Hobby</th> </tr> <tr> <td>${saved.name}</td> <td>${saved.age}</td> <td>${saved.hobby}</td> </tr> </table>`; result.innerHTML = t; // show the result } const form = document.getElementById("my-form"); // get the form element form.addEventListener("submit", e => { // detect once the submit button is clicked e.preventDefault(); // Don't allow the form to redirect to another page const { elements } = form; // Get input elements so we can retrieve their values const output = { name: elements.name.value, // get name age: +elements.age.value, // get age; the "+" in front converts it to a number hobby: elements.hobby.value // get hobby }; localStorage.setItem("save", output); // save output to localStorage // Create a template const template = `<table> <tr> <th>Name</th> <th>Age</th> <th>Hobby</th> </tr> <tr> <td>${output.name}</td> <td>${output.age}</td> <td>${output.hobby}</td> </tr> </table>`; result.innerHTML = template; // show the result });

 <form id="my-form"> <:-- some dummy inputs --> <label for="name">Name.</label> <input type="text" id="name" name="name" placeholder="Enter your name..:"> <br> <label for="age">Age.</label> <input type="number" id="age" name="age" placeholder="Enter your age..:"> <br> <label for="hobby">Hobby.</label> <input type="text" id="hobby" name="hobby" placeholder="Enter your hobby..."> <br> <input type="submit" /> </form> <div id="result"></div>

注意：localStorage 在上面的示例中不起作用，因为嵌入不允许它。