如何修复 HTML 表单提交按钮无响应的问题

你的表单无法提交，根本原因有两个——HTML 语法违规和语义逻辑错误，二者共同导致浏览器完全忽略 zuojiankuohaophpcnbutton type="submit"> 的默认行为。

? 错误一：非法嵌套 <form> 标签

HTML 规范明确禁止 <form> 元素相互嵌套。你当前代码中存在三层结构：

<form action="php/record.php">   <!-- 外层 form（有 action） -->
  <h3>...</h3>
  <form autocomplete="off" action="">   <!-- ❌ 内层 form（无 action，且非法嵌套） -->
    <div class="autocomplete">...</div>
  </form>
  <form autocomplete="off" action="">   <!-- ❌ 又一个非法嵌套 form -->
    ...
  </form>
  <!-- ...其余字段... -->
  <button type="submit">Submit</button>
</form>

浏览器遇到嵌套 <form> 时，会自动“截断”外层表单的范围——实际有效的表单仅限于第一个 </form> 结束标签之前的内容，后续所有字段（包括 select、input 和 button）都游离在任何表单之外。因此，点击按钮时根本没有关联的表单可提交。

✅ 修复方法：删除所有内层 <form> 标签，只保留最外层一个 <form>，并将全部字段（<input>、<select>、<button> 等）统一置于其内部：

立即学习“前端免费学习笔记（深入）”；

Giiso写作机器人

Giiso写作机器人，让写作更简单

下载

<div class="container">
  <form action="php/record.php" autocomplete="off">
    <h3>Enter the following details :</h3>

    <!-- ✅ 所有字段现在都在同一个 form 内 -->
    <div class="autocomplete" style="width:300px;">
      <label for="school">School :</label><br>
      <input id="school" type="text" name="School" placeholder="Enter School" required>
    </div>
    <br>

    <div class="autocomplete" style="width:300px;">
      <label for="school_ID">School ID :</label><br>
      <input id="school_ID" type="text" name="School_ID" placeholder="Enter School ID" required>
    </div>
    <br>

    <label for="class">Class :</label>
    <select name="Class" id="class" required>
      <option value="">-- Select Class --</option>
      <option value="I">I</option>
      <option value="II">II</option>
      <option value="III">III</option>
      <option value="IV">IV</option>
      <option value="V">V</option>
    </select>

    <label for="sec">Sec :</label>
    <select name="sec" id="sec" required>
      <option value="">-- Select Section --</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>

    <br><br>

    <label for="Film_1">Film 1 :</label><br>
    <input id="Film_1" type="text" name="Film_1" placeholder="Enter film 1" required><br><br>

    <label for="Film_2">Film 2 (if applicable) :</label><br>
    <input id="Film_2" type="text" name="Film_2" placeholder="Enter film 2"><br><br>

    <label for="Film_3">Film 3 (if applicable) :</label><br>
    <input id="Film_3" type="text" name="Film_3" placeholder="Enter film 3"><br><br>

    <button id="submit_btn" type="submit">Submit</button>

    <br><br>
    <label for="Picture">Upload Picture:</label><br>
    <input id="Picture" name="Picture" type="file" accept="image/*" onchange="readURL(this)">
  </form>
</div>

? 错误二：按钮类型混淆（次要但需确认）

虽然你代码中写的是 type="submit"，但答案指出曾误用 type="button"——这会彻底禁用原生提交功能。务必确保：

• 提交按钮使用 type="submit"（显式声明更安全）；
• 不要依赖 JavaScript 绑定 click 事件来手动 submit()，除非你明确拦截并处理（此时需 event.preventDefault()）；
• 若使用 type="button"，必须配合 JS 调用 form.submit()，否则无任何行为。

✅ 验证按钮代码应为：

<button type="submit" id="submit_btn">Submit</button>
<!-- 或更简洁地（submit 是默认 type） -->
<button id="submit_btn">Submit</button>

✅ 额外建议：提升健壮性

• 为 <select> 添加默认空选项并设 required，避免用户跳过必选下拉框；
• 文件上传字段 <input type="file"> 应放在 <form> 内，且服务端（如 record.php）需正确处理 $_FILES；
• 使用浏览器开发者工具（F12 → Console / Network）验证：点击提交后是否发起 POST 请求到 php/record.php；若无请求，说明表单未被识别；若有 404，则检查路径 php/record.php 是否真实存在且大小写正确。

修复后，点击 Submit 按钮将自动以 GET（默认）或 POST（需加 method="post"）方式提交全部字段，并跳转至 php/record.php ——这才是符合预期的原生表单行为。