HTML表单提交在新标签页打开：解决方案与最佳实践

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

<form id="myForm" action="" target="_blank">
  <!-- ... 表单元素 ... -->
  <button class="form-btn" onclick="sendMail()">Log in</button>
  <!-- ... 其他内容 ... -->
</form>

这里存在两个关键点：

1. target="_blank"属性：这是导致表单在新标签页中打开的直接原因。
2. action=""属性：当action属性为空时，表单会提交到当前页面的URL。结合target="_blank"，这意味着当前页面将在一个新标签页中重新加载。
3. onclick="sendMail()"：按钮上绑定了JavaScript事件。如果sendMail()函数没有阻止表单的默认提交行为，那么在执行JavaScript之后，表单仍然会按照其action和target属性进行提交。

解决方案一：移除target="_blank"属性

如果您不希望表单提交后在新标签页中打开，而是希望在当前页面处理（无论是刷新当前页还是导航到其他页面），最直接的解决方案就是移除target="_blank"属性。

修改后的HTML代码示例：

<form id="myForm" action="">
  <!-- ... 表单元素 ... -->
  <button class="form-btn" onclick="sendMail()">Log in</button>
  <!-- ... 其他内容 ... -->
</form>

通过此修改，表单将恢复其默认行为，即在当前标签页中提交。如果action属性仍然为空，页面将在当前标签页中刷新。如果action指向其他URL，页面将导航到该URL。

Veed AI Voice Generator

Veed推出的AI语音生成器

下载

解决方案二：阻止JavaScript中的默认表单提交行为

在您的代码中，登录按钮上绑定了onclick="sendMail()"事件。这通常意味着您希望通过JavaScript（例如，使用AJAX或EmailJS库）来处理表单数据，而不是通过传统的浏览器表单提交机制。

在这种情况下，即使移除了target="_blank"，如果sendMail()函数没有明确阻止表单的默认提交，表单仍然会在JavaScript执行完毕后尝试提交，这可能导致页面刷新或导航。

为了确保JavaScript完全控制表单提交过程，您需要在sendMail()函数中调用event.preventDefault()。

JavaScript代码示例（假设sendMail函数）：

function sendMail(event) {
  // 阻止表单的默认提交行为
  event.preventDefault(); 

  // 获取表单数据
  const email = document.getElementById('email').value;
  const name = document.getElementById('name').value; // 这里的name可能是password，根据实际情况调整ID

  // 假设您正在使用EmailJS
  var templateParams = {
    from_name: name, // 假设name是发送者名称
    to_name: 'Recipient Name', // 接收者名称
    message: `User email: ${email}`, // 消息内容
  };

  emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams)
    .then(function(response) {
      console.log('SUCCESS!', response.status, response.text);
      // 可以在这里显示成功消息或重定向
      alert('邮件发送成功！');
    }, function(error) {
      console.log('FAILED...', error);
      // 可以在这里显示错误消息
      alert('邮件发送失败！');
    });

  // 如果您希望在发送邮件后清空表单
  // document.getElementById('myForm').reset(); 
}

HTML修改（可选，更推荐将事件监听器移到JS中）：

为了将事件处理与HTML分离，更推荐在JavaScript中添加事件监听器，而不是直接在HTML中使用onclick属性。

<form id="myForm" action="">
  <!-- ... 表单元素 ... -->
  <button type="submit" class="form-btn">Log in</button> 
  <!-- type="submit" 是按钮的默认类型，但明确写出更清晰 -->
  <!-- ... 其他内容 ... -->
</form>

对应的JavaScript：

document.addEventListener('DOMContentLoaded', function() {
  const myForm = document.getElementById('myForm');
  myForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为

    // 获取表单数据
    const email = document.getElementById('email').value;
    const password = document.getElementById('name').value; // 修正为password，假设name是密码字段ID

    // 假设您正在使用EmailJS
    var templateParams = {
      from_email: email, // 假设这是发送者邮箱
      user_password: password, // 假设这是用户密码（注意：不应在前端直接发送敏感信息）
      to_name: 'Admin', // 接收者名称
      subject: 'Login Attempt', // 主题
    };

    emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams)
      .then(function(response) {
        console.log('SUCCESS!', response.status, response.text);
        alert('登录信息已发送！'); // 或执行其他成功操作
      }, function(error) {
        console.log('FAILED...', error);
        alert('发送失败，请重试！'); // 或执行其他错误处理
      });
  });
});

注意事项：

• 安全警示：在前端直接处理和发送用户密码等敏感信息到EmailJS或其他服务是非常不安全的做法。通常，登录逻辑应在后端服务器处理，以确保数据安全。此处的EmailJS示例仅为演示event.preventDefault()的用法。
• type="submit"：将按钮的type属性明确设置为submit是良好的实践，尽管它是默认值。如果按钮类型为button，则它不会触发表单提交，也就不需要event.preventDefault()，但通常登录按钮的语义是提交表单。

总结

解决HTML表单提交后在新标签页中打开的问题，核心在于检查并移除