解决HTML表单提交在新标签页打开的问题-html教程-PHP中文网

解决HTML表单提交在新标签页打开的问题

聖光之護

发布： 2025-12-03 11:27:43

原创

973人浏览过

解决HTML表单提交在新标签页打开的问题

本文旨在解决html 表单提交后页面在新标签页中打开的常见问题。核心原因在于表单元素中不当使用了`target="_blank"`属性。教程将详细解释该属性的作用，并通过示例代码展示如何移除或正确配置此属性，确保表单提交在当前页面完成，从而优化用户体验。

在网页开发中，用户在表单中填写信息并点击提交按钮后，通常期望提交操作在当前页面或通过 AJAX 请求在后台完成，而不是导致整个页面在新标签页或新窗口中重新加载。然而，一个常见的配置错误会导致表单提交时，当前页面在新标签页中再次打开。

问题根源：target="_blank"属性

当HTML表单提交后在新标签页中打开时，其主要原因在于

标签设置了target="_blank"时，浏览器会强制将表单提交后的结果（即使是当前页面）在新标签页中打开。这对于需要用户保持在当前页面的场景（如登录、注册、搜索等）来说，会严重影响用户体验。

示例代码分析与修正

以下是一个导致问题发生的HTML表单代码示例：

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

<form id="myForm" action="" target="_blank">
  <div class="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>
  <!-- ...其他表单元素... -->
</form>

登录后复制

在这段代码中，

HiShop网店代理分销系统

Hishop.5.2.BETA2版主要更新： [修改] 进一步优化了首页打开速度 [修改] 美化了默认模板 [修改] 优化系统架构,程序标签及SQL查询效率,访问系统页面的速度大大提高 [修改] 采用了HTML模板机制,实现了前台模板可视化编辑,降低模板制作与修改的难度. [修改] 全新更换前后台AJAX技术框架,提升了用户操作体验. 店铺管理 [新增] 整合TQ在线客服 [修改] 后台广告位增加

查看详情

标签中移除target="_blank"属性即可。

修正后的HTML代码：

<form id="myForm" action="">
  <div class="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>
  <!-- ...其他表单元素... -->
</form>

登录后复制

移除target="_blank"后，表单将恢复其默认行为，即在当前标签页中提交并处理响应。如果action属性为空，表单将提交到当前页面的URL。

注意事项与最佳实践

理解target属性的用途： 仅当您确实需要表单提交结果在一个新窗口或新标签页中显示时才使用target="_blank"。例如，如果提交表单后会生成一个报告文件并在新标签页中打开供用户查看。
默认行为： 表单的默认target值是_self。这意味着，如果您不指定target属性，表单将自动在当前页面提交。这通常是登录、注册等操作的期望行为。
JavaScript 提交： 如果您使用 JavaScript（例如通过fetch API 或 XMLHttpRequest）来异步提交表单数据（如示例中的sendMail()函数可能暗示的），那么表单本身的action和target属性将不再起作用，因为实际的数据提交是由 JavaScript 代码控制的，它不会导致页面刷新或跳转。在这种情况下，即使存在target="_blank"，也不会触发新标签页打开，但为了代码的清晰和避免混淆，仍然建议移除它。
用户体验： 对于大部分表单提交，保持用户在当前页面是更好的体验。在新标签页中打开可能会打断用户的工作流，尤其是在移动设备上。