标签的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表单提交后在新标签页中打开的问题，核心在于检查并移除
391
收藏
