点击登录按钮后HTML页面在新标签页打开的问题解决方法

问题：制作了一个HTML表单，点击登录按钮时页面会在新标签页重新打开，如何修复？以下是原代码：

<!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" />
    <title>Contact Us</title>
    <link rel="stylesheet" href="style.css">
    <script src="script2.js"></script>

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"
    ></script>
    </script>
  </head>
  <body>
    <div id="wrapper">
      <div class="container">
        <div class="phone-app-demo"></div>
        <div class="form-data">
          <form id="myForm" action="" target="_blank">
            <div class="logo">
              <img src="./images/logo.png" alt="logo">
            </div>
            <input type="text" placeholder="Phone number, username, or email"   id="email">
            <input type="password" placeholder="Password"   id="name">
            <button class="form-btn"  onclick="sendMail()">Log in</button>
            <span class="has-separator">Or</span>
            <a class="facebook-login" href="#">
              <i class="fab fa-facebook-square"></i> Log in with Facebook
            </a>
            <a class="password-reset" href="#">Forgot password?</a>
          </form>
          <div class="sign-up">
            Don't have an account? <a href="#">Sign up</a>
          </div>
          <div class="get-the-app">
            <span>Get the app.</span>
            <div class="badges">
              <img src="./images/app-store.png" alt="app-store badge">
              <img src="./images/google-play.png" alt="google-play badge">
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

修复步骤： #

• 移除form标签的target="_blank"属性：这个属性的作用是指定表单提交后在新标签页打开页面，删除它就能直接避免新开标签页的问题。
• 阻止表单默认提交行为：form内的button默认是提交按钮，即使去掉target，点击后仍会触发表单默认提交逻辑导致页面刷新。需要修改sendMail()函数，加入阻止默认行为的代码：

修改后的sendMail()函数示例：

function sendMail(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  // 保留原有的邮件发送逻辑
  // ...
}

同时，要给button的onclick传递event参数：

<button class="form-btn" onclick="sendMail(event)">Log in</button>

修改后的核心表单代码： #

<form id="myForm" action="">
  <div class="logo">
    <img src="./images/logo.png" alt="logo">
  </div>
  <input type="text" placeholder="Phone number, username, or email" id="email">
  <input type="password" placeholder="Password" id="name">
  <button class="form-btn" onclick="sendMail(event)">Log in</button>
  <!-- 其余表单内容保持不变 -->
</form>

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