如何用JavaScript在另一个页面打印用户表单输入内容？

DevOps 小满

2026-8-15

实现表单提交内容在另一个页面展示的解决方案

1. 完善表单代码

先补全不完整的表单结构，确保能正常提交输入内容：

<form action="action_page.html" method="GET">
  <div>
    <label for="fname">First name:</label>
    <br>
    <input type="text" id="fname" name="fname"><br><br>
    <button type="submit">提交</button>
  </div>
</form>

注：修正了label的for属性，使其与输入框的id匹配，保证表单语义正确。

2. 修正action_page.html的展示代码

现有JS代码存在三个核心问题：缺少承载结果的DOM容器、模板字符串语法错误、直接追加字符串的方式不规范，以下是修正后的完整代码：

方案一：使用DOM节点操作

<!DOCTYPE html>
<html>
<body>
  <!-- 新增结果展示容器 -->
  <div id="result"></div>

  <script>
    const resultsContainer = document.getElementById('result');
    // 解析URL中的GET参数
    new URLSearchParams(window.location.search).forEach((value, name) => {
      // 创建文本节点存储键值对
      const textNode = document.createTextNode(`${name}: ${value}`);
      resultsContainer.appendChild(textNode);
      // 添加换行元素
      resultsContainer.appendChild(document.createElement('br'));
    });
  </script>
</body>
</html>

方案二：使用innerHTML拼接（更简洁）

<!DOCTYPE html>
<html>
<body>
  <div id="result"></div>

  <script>
    const resultsContainer = document.getElementById('result');
    let displayContent = '';
    new URLSearchParams(window.location.search).forEach((value, name) => {
      displayContent += `${name}: ${value}<br>`;
    });
    resultsContainer.innerHTML = displayContent;
  </script>
</body>
</html>