PHP+Apache环境下<form>标签解析异常问题求助

你的问题根源是HTML标签未正确闭合：form内部的<div class="flex flex-col gap-4 p-4 md:p-8 bg-white">标签缺少闭合标签</div>，浏览器的HTML解析器会自动尝试修复不完整的DOM结构，因此将后续所有内容都纳入了form标签范围内。

同时你的form的action属性写法有误，<?php $_PHP_SELF ?>不会输出任何内容，应该使用<?php echo $_SERVER['PHP_SELF']; ?>来正确输出当前脚本路径。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  <title>Artificial Doctor</title>
  <style>
    body {
      background: #073B4C;
    }

    .heading {
      color: white;
    }
  </style>
</head>

<body><?php require('components/header.php') ?>
  <div class="pt-6 sm:pt-8 lg:pt-12">
    <div class="max-w-screen-2xl px-4 md:px-8 mx-autoflex">
      <h2 class="heading text-2xl lg:text-3xl font-bold text-center mb-4 md:mb-8">LOGIN</h2>
      <form class="max-w-lg border rounded-lg mx-auto" style="margin-bottom: 150px;" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        <div class="flex flex-col gap-4 p-4 md:p-8 bg-white">
          <div>
            <label for="email" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Email</label>
            <input name="email" id="email" placeholder="Username OR example@email.com" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
          </div>

          <div>
            <label for="password" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Password</label>
            <input name="password" autocomplete="off" id="password" placeholder="PASSWORD@123" type=password class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
          </div>
          <div class="m-auto">
            <input type="checkbox" class="form-check-input" id="remember_me" name="remember_me">
            <label class="form-check-label" for="remember_me">Remember Me</label>
          </div>

          <button class="block bg-gray-800 hover:bg-gray-700 active:bg-gray-600 focus-visible:ring ring-gray-300 text-white text-sm md:text-base font-bold text-center rounded-lg outline-none transition duration-100 px-8 py-3" type="submit">Login</button>
        </div> <!-- 新增：闭合form内部的flex容器div -->
      </form>

      <div class="flex justify-center items-center relative">
        <span class="h-px bg-gray-300 absolute inset-x-0"></span>
        <span class="bg-white text-gray-400 text-sm relative px-4"></span>
      </div>
      <button id="register" class="flex justify-center items-center bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus-visible:ring ring-blue-300 text-white text-sm md:text-base font-semibold text-center rounded-lg outline-none transition duration-100 gap-2 px-8 py-3" onclick="window.location.href ='http://localhost/doctor/register' ">
        <span class="material-symbols-outlined">how_to_reg</span>Register
      </button>

      <button class="flex justify-center items-center bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus-visible:ring ring-blue-300 text-white text-sm md:text-base font-semibold text-center rounded-lg outline-none transition duration-100 gap-2 px-8 py-3">
        <span class="material-symbols-outlined">password</span>Forgot Password
      </button>
    </div>
  </div>
  <?php require('components/footer.php') ?>
</body>
</html>

关键修复点 #

• 在<button>Login</button>之后添加</div>，闭合form内部的容器div，确保form标签能正确闭合。
• 修正form的action属性为<?php echo $_SERVER['PHP_SELF']; ?>，保证表单提交路径正确。

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