标签的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>
这里存在两个关键点：
- target=”_blank”属性：这是导致表单在新标签页中打开的直接原因。
- action=””属性：当action属性为空时，表单会提交到当前页面的URL。结合target=”_blank”，这意味着当前页面将在一个新标签页中重新加载。
- 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。
解决方案二：阻止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表单提交后在新标签页中打开的问题，核心在于检查并移除
