当html表单点击提交按钮后意外地在新标签页中打开当前页面时，这通常是由于表单元素设置了`target="_blank"`属性所致。解决此问题的核心方法是移除表单标签中的`target="_blank"`属性。此外，如果表单提交由javascript处理，还需要确保使用`event.preventdefault()`来阻止表单的默认提交行为，从而实现预期的交互逻辑。

理解HTML表单的target属性

在HTML中，

标签的target属性用于指定提交表单后，服务器响应（或表单action指定的页面）将在何处显示。它类似于标签的target属性。

常见的target属性值包括：

• _self：在当前窗口/标签页中打开（默认值）。
• _blank：在新窗口/标签页中打开。
• _parent：在父框架集中打开。
• _top：在整个窗口中打开，取消所有框架。
• 框架名称：在指定的具名框架中打开。

当您遇到表单提交后在新标签页中重新加载当前页面的情况，最直接的原因就是表单被设置了target="_blank"属性，并且其action属性为空或指向当前页面。

问题分析与解决方案

根据您提供的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。

word报告自动生成神器

Word报告自动生成神器。自动生成专业Word文档报告，支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。

下载

解决方案二：阻止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表单提交后在新标签页中打开的问题，核心在于检查并移除

标签上的target="_blank"属性。如果您的表单提交是由JavaScript处理的（例如通过AJAX或第三方库），那么除了移除target="_blank"之外，还必须在JavaScript事件处理函数中使用event.preventDefault()来阻止表单的默认提交行为，从而确保您的JavaScript逻辑能够完全控制表单的交互流程。理解target属性以及表单的默认提交机制是构建健壮Web应用的基础。