HTML页面注册/重置模态框提交按钮失效问题求助

问题情况 #

我有三个模态框模块，登录模态框的提交按钮功能正常，但注册和密码重置模态框的提交按钮点击后完全没反应。试过给按钮加不同ID、给表单设不同名称，都没解决问题。代码如下：

<!-- Login Modal -->
<div id="login" class="w3-modal">
  <div class="w3-modal-content w3-animate-zoom">
    <div class="w3-container w3-white w3-center">
        <form action="authenticate.php" method="post">
        <i onclick="document.getElementById('login').style.display='none'" class="fa fa-remove w3-right w3-button w3-transparent w3-xxlarge cidd-hover-red"></i>
        <h2 class="w3-wide w3-center">Accedi</h2>
         <label for="email"></label>
      <p><input name= "email" class="w3-input w3-border w3-large" type="text" placeholder="Inserisci indirizzo e-mail" id="email" required></p>
      <label for="password"></label>
      <p><input name="password" class="w3-input w3-border w3-large" type="password" placeholder="Inserisci la password" id="password" required></p>
      <p><input  class="w3-button w3-padding-large cidd-red w3-margin-bottom w3-xlarge" value="Accedi" type="submit"></p>
        <p class="w3-large">Hai dimenticato la password? <a href="#" title="Reimposta la password" class="w3-hover-opacity" onclick="openModal('login','pwdreset')">Recupera la password</a></p>
         <p class="w3-large">Non sei registrato? <a href="#" title="Registrati" class="w3-hover-opacity" onclick="openModal('login','register')">Registrati</a></p>
    </form>
    </div>
  </div>
</div>

<!-- Password reset Modal -->
<div id="pwdreset" class="w3-modal">
  <div class="w3-modal-content w3-animate-zoom">
    <div class="w3-container w3-white w3-center">
    <form action="forgottenpsw.php" method="post"></form>
      <i onclick="document.getElementById('pwdreset').style.display='none'" class="fa fa-remove w3-right w3-button w3-transparent w3-xxlarge cidd-hover-red"></i>
      
      <h2 class="w3-wide w3-center">Reimposta la Password</h2>
      <label for="email2"></label>
      <p><input name= "email2" class="w3-input w3-border w3-large" type="text" placeholder="Inserisci indirizzo e-mail" id="email2" required></p>
      
      <p><input class="w3-button w3-padding-large cidd-red w3-margin-bottom w3-xlarge" value="Reimposta" type="submit"></p>
     
      <p class="w3-large"> <a href="#" title="Accedi" class="w3-hover-opacity" onclick="openModal('pwdreset','login')">Accedi a Clear IDD</a></p>
      <p class="w3-large">Non sei registrato? <a href="#" title="Registrati" class="w3-hover-opacity" onclick="openModal('pwdreset','register')">Registrati</a></p>
   </form>
    </div>
  </div>
</div>

<!-- Register Modal -->
<div id="register" class="w3-modal">
  <div class="w3-modal-content w3-animate-zoom">
    <div class="w3-container w3-white w3-center">
    <form action="register.php" method="post"></form>
      <i onclick="document.getElementById('register').style.display='none'" class="fa fa-remove w3-right w3-button w3-transparent w3-xxlarge cidd-hover-red"></i>
      <h2 class="w3-wide w3-center">Registrati</h2>
      <label for="fname"></label>
      <p><input name= "fname" class="w3-input w3-border w3-large" type="text" placeholder="Inserisci il tuo nome" id="fname" required></p>
      <label for="surname"></label>
      <p><input name= "surname" class="w3-input w3-border w3-large" type="text" placeholder="Inserisci il tuo cognome" id="surname" required></p>
      
      <label for="email3"></label>
      <p><input name= "email3" class="w3-input w3-border w3-large" type="text" placeholder="Inserisci indirizzo e-mail" id="email3" required></p>
      <label for="password3"></label>
      <p><input name="password3" class="w3-input w3-border w3-large" type="password" placeholder="Inserisci la password" id="password3" required></p>
      <label for="password4"></label>
      <p><input name= "password4" class="w3-input w3-border w3-large" type="text" placeholder="Conferma la password" id="password4" required></p>
      <p><input  class="w3-button w3-padding-large cidd-red w3-margin-bottom w3-xlarge" value="Registrati" type="submit"></p>
      <p class="w3-large"> <a href="#" title="Recupera la password" class="w3-hover-opacity" onclick="openModal('register','login')">Accedi</a></p>
      <p class="w3-large">Hai dimenticato la password?<a href="#" title="Recupera la password" class="w3-hover-opacity" onclick="openModal('register','pwdreset')">Recupera la password</a></p>
    </form>
    </div>
  </div>
</div>

问题原因 #

注册和密码重置模态框里的表单标签被提前闭合了：在开头写了<form action="xxx.php" method="post"></form>，后面的输入框、提交按钮都不在表单标签范围内，导致提交按钮不属于任何表单，点击自然不会触发提交动作。而登录模态框的表单是正确包裹所有内容的，所以功能正常。

修正后的代码 #

把注册和密码重置模态框里的表单闭合标签移到所有表单内容的末尾即可：

密码重置模态框修正后 #

<!-- Password reset Modal -->
<div id="pwdreset" class="w3-modal">
  <div class="w3-modal-content w3-animate-zoom">
    <div class="w3-container w3-white w3-center">
      <form action="forgottenpsw.php" method="post">
        <i onclick="document.getElementById('pwdreset').style.display='none'" class="fa fa-remove w3-right w3-button w3-transparent w3-xxlarge cidd-hover-red"></i>
        
        <h2 class="w3-wide w3-center">Reimposta la Password</h2>
        <label for="email2"></label>
        <p><input name= "email2" class="w3-input w3-border w3-large" type="text" placeholder="Inserisci indirizzo e-mail" id="email2" required></p>
        
        <p><input class="w3-button w3-padding-large cidd-red w3-margin-bottom w3-xlarge" value="Reimposta" type="submit"></p>
       
        <p class="w3-large"> <a href="#" title="Accedi" class="w3-hover-opacity" onclick="openModal('pwdreset','login')">Accedi a Clear IDD</a></p>
        <p class="w3-large">Non sei registrato? <a href="#" title="Registrati" class="w3-hover-opacity" onclick="openModal('pwdreset','register')">Registrati</a></p>
      </form>
    </div>
  </div>
</div>

注册模态框修正后 #

<!-- Register Modal -->
<div id="register" class="w3-modal">
  <div class="w3-modal-content w3-animate-zoom">
    <div class="w3-container w3-white w3-center">
      <form action="register.php" method="post">
        <i onclick="document.getElementById('register').style.display='none'" class="fa fa-remove w3-right w3-button w3-transparent w3-xxlarge cidd-hover-red"></i>
        <h2 class="w3-wide w3-center">Registrati</h2>
        <label for="fname"></label>
        <p><input name= "fname" class="w3-input w3-border w3-large" type="text" placeholder="Inserisci il tuo nome" id="fname" required></p>
        <label for="surname"></label>
        <p><input name= "surname" class="w3-input w3-border w3-large" type="text" placeholder="Inserisci il tuo cognome" id="surname" required></p>
        
        <label for="email3"></label>
        <p><input name= "email3" class="w3-input w3-border w3-large" type="text" placeholder="Inserisci indirizzo e-mail" id="email3" required></p>
        <label for="password3"></label>
        <p><input name="password3" class="w3-input w3-border w3-large" type="password" placeholder="Inserisci la password" id="password3" required></p>
        <label for="password4"></label>
        <p><input name= "password4" class="w3-input w3-border w3-large" type="text" placeholder="Conferma la password" id="password4" required></p>
        <p><input  class="w3-button w3-padding-large cidd-red w3-margin-bottom w3-xlarge" value="Registrati" type="submit"></p>
        <p class="w3-large"> <a href="#" title="Recupera la password" class="w3-hover-opacity" onclick="openModal('register','login')">Accedi</a></p>
        <p class="w3-large">Hai dimenticato la password?<a href="#" title="Recupera la password" class="w3-hover-opacity" onclick="openModal('register','pwdreset')">Recupera la password</a></p>
      </form>
    </div>
  </div>
</div>

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