提交注册表单页面刷新后，如何保持显示注册表单？

问题场景 #

在同一页面实现了带切换动画的登录/注册表单，点击切换按钮可在两个表单间互相切换。但提交注册表单出现「ID无效」「邮箱已被占用」等错误提示后，页面刷新会默认显示登录表单，而非停留在注册表单。

解决方案 #

核心思路：后端判断注册表单是否提交并出错，若满足条件，直接给<main>标签添加sign-up-mode类，让页面加载时自动显示注册表单；同时保留用户已输入的内容，优化体验。

1. 动态给<main>添加类 #

修改<main>标签，通过PHP判断注册提交状态，自动添加类：

<main <?php if(isset($_POST['submitBtn'])) echo 'class="sign-up-mode"' ?>>

2. 保留注册表单的用户输入值 #

给注册表单的输入框添加value属性，回填用户提交过的内容（用htmlspecialchars()防止XSS攻击）：

• 姓名输入框：

<div class="input-wrap">
  <input
    type="text"
    minlength="4"
    class="input-field"
    autocomplete="off"
    name="fullName"
    required
    value="<?= isset($_POST['fullName']) ? htmlspecialchars($_POST['fullName']) : '' ?>"
  />
  <label>Name</label>
</div>

• 邮箱输入框：

<div class="input-wrap">
  <input
    type="email"
    class="input-field"
    autocomplete="off" 
    name="email"
    required
    value="<?= isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>"
  />
  <label>Email</label>
</div>

修改后的完整<main>代码片段 #

<main <?php if(isset($_POST['submitBtn'])) echo 'class="sign-up-mode"' ?>>
  <div class="box">
    <div class="inner-box">
      <div class="forms-wrap">
        <!-- 登录表单代码保持不变 -->
        <form action="index.php"  method="POST" autocomplete="off" class="sign-in-form">
          <div class="logo">
            <h2>Mero <span>Notes</h2>
          </div>

          <div class="heading">
            <h4>Login to Continue</h4>
          </div>
          <?php if(isset($_POST['loginButton'])){
              echo '<p class="echoPar" style=""><i class="fa-solid fa-triangle-exclamation" style="color:red; font-size:11px;"></i> '.$message.'</p>';
              echo'<style>
              .input-field + label {
                font-size: 0.75rem;
                top: -2px;
              }</style>';
          } ?>   
          <div class="actual-form">
            <div class="input-wrap">
              <input 
                type="text"
                minlength="4"
                class="input-field"
                autocomplete="off"name="email"name="password"
                required value="<?= $_POST['email'] ?? '' ?>"
              />
              <label>Email</label>
            </div>

            <div class="input-wrap">
              <input
                type="password"
                minlength="4"
                class="input-field"
                autocomplete="off"
                required
              />
              <label>Password</label>
            </div>
            <p class="text">
              <a href="#"> Forgot Password ?</a> 
            </p>
            <button class="loginButton" id="loginButton" name="loginButton">Log In</button>
            
            <h6>Don't Have an Account ?</h6>
            <a href="#" class="toggle">Sign up Here</a>
          </div>
        </form>

        <!-- 修改后的注册表单 -->
        <form id="signUpForm" action="index.php" method="POST" autocomplete="off" class="sign-up-form">
          <div class="logo">
            <h2>Mero Notes</h2>
          </div>

          <div class="heading">
            <h4>Get Started</h4>
          </div>
          <?php if(isset($_POST['submitBtn'])){
              echo '<p class="echoPar" style=""><i class="fa-solid fa-triangle-exclamation" style="color:red; font-size:11px;"></i> '.$message.'</p>';
              echo'<style>
              .input-field + label {
                font-size: 0.75rem;
                top: -2px;
              }</style>';
          } ?>          
          <p id="validationSpan"></p>
          <div class="actual-form">
            <div class="input-wrap">
              <input
                type="text"
                minlength="4"
                class="input-field"
                autocomplete="off"
                name="fullName"
                required
                value="<?= isset($_POST['fullName']) ? htmlspecialchars($_POST['fullName']) : '' ?>"
              />
              <label>Name</label>
            </div>

            <div class="input-wrap">
              <input
                type="email"
                class="input-field"
                autocomplete="off" 
                name="email"
                required
                value="<?= isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>"
              />
              <label>Email</label>
            </div>

            <div class="input-wrap">
              <input
                type="password"
                minlength="4"
                class="input-field"
                autocomplete="off"name="password" id="id_password" minlength="8"  onkeyup="passValidation();"
                required
              />
              <label>Password</label>
            </div>
            <div class="input-wrap">
              <input
                type="password"
                class="input-field"
                autocomplete="off"name="conPassword" id="id_conPassword" onkeyup="passValidation();"
                required
              />
              <label>Confirm Password</label>
            </div>

            <button name="submitBtn" type="submit" class="loginButton" id="regBtn" onclick="return passValidationAlert()">SignUp </button>

            <h6>Already have an Account ?</h6>
            <a href="#" class="toggle">Sign In Here</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</main>

原理说明 #

之前仅通过JavaScript点击切换按钮时才会给<main>添加sign-up-mode类，页面刷新后该类会丢失，导致默认显示登录表单。现在通过后端PHP判断注册表单是否提交并出错，直接在页面加载时给<main>加上该类，确保刷新后停留在注册表单；同时回填用户输入，避免重复填写。

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