如何從表單中獲取信息並將其放入包含 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 在上面的示例中不起作用，因為嵌入不允許它。