HTML表单定位问题：实现两个查询表单及结果表格左右布局

嘿，这个布局调整其实挺简单的，咱们分两步就能搞定：先把页面改成左右分栏的结构，再调整PHP逻辑让两个表单的结果各自待在自己的区域里～

先把页面拆成左右两个独立区块，左边放第一个表单和它的结果，右边放第二个表单和它的结果，这样就从根源上避免了结果互相覆盖的问题。

给你个HTML结构示例：

<div class="page-container">
  <!-- 左侧区域：第一个表单 + 专属结果区 -->
  <div class="left-section">
    <form method="post" action="">
      <label for="query1">第一个查询：</label>
      <input type="text" id="query1" name="query1" 
             value="<?php echo isset($_POST['query1']) ? htmlspecialchars($_POST['query1']) : ''; ?>">
      <button type="submit" name="submit_form1">提交查询</button>
    </form>

    <!-- 第一个表单的结果表格容器 -->
    <div class="result-area">
      <?php
      // 只处理第一个表单的提交请求
      if (isset($_POST['submit_form1'])) {
          // 这里写你的数据库查询逻辑，比如根据$_POST['query1']获取数据
          // 示例表格输出
          echo "<table border='1' cellpadding='8'>";
          echo "<tr><th>字段1</th><th>字段2</th></tr>";
          // 循环输出数据行...
          echo "</table>";
      }
      ?>
    </div>
  </div>

  <!-- 右侧区域：第二个表单 + 专属结果区 -->
  <div class="right-section">
    <form method="post" action="">
      <label for="query2">第二个查询：</label>
      <input type="text" id="query2" name="query2" 
             value="<?php echo isset($_POST['query2']) ? htmlspecialchars($_POST['query2']) : ''; ?>">
      <button type="submit" name="submit_form2">提交查询</button>
    </form>

    <!-- 第二个表单的结果表格容器 -->
    <div class="result-area">
      <?php
      // 只处理第二个表单的提交请求
      if (isset($_POST['submit_form2'])) {
          // 这里写第二个表单的数据库查询逻辑
          echo "<table border='1' cellpadding='8'>";
          echo "<tr><th>字段A</th><th>字段B</th></tr>";
          // 循环输出数据行...
          echo "</table>";
      }
      ?>
    </div>
  </div>
</div>

再加上CSS让两栏并排显示：

.page-container {
  display: flex;
  gap: 30px; /* 左右栏之间的间距 */
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.left-section, .right-section {
  flex: 1; /* 让两栏宽度自动平分 */
}

.result-area {
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background-color: #f5f5f5;
}

核心技巧是给两个表单的提交按钮设置不同的name属性（比如submit_form1和submit_form2），这样PHP就能精准区分是哪个表单提交的请求，把结果渲染到对应的区域里，不会串位。

另外我在输入框里加了value属性的处理，用户提交表单后输入的内容会保留在框里，体验会更好～

如果你更习惯用Grid，把.page-container的CSS改成下面这样就行，效果完全一样：

.page-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

内容的提问来源于stack exchange，提问作者Tom