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

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

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

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

当HTML表单提交后在新标签页中打开时，其主要原因在于<form>标签中设置了target="_blank"属性。target属性通常用于指定提交表单后响应页面在哪个窗口或框架中显示。

• _self: 默认值，响应页面在当前窗口或框架中显示。
• _blank: 响应页面在新窗口或新标签页中显示。
• _parent: 响应页面在其父框架中显示。
• _top: 响应页面在整个窗口中显示（清除所有框架）。
• framename: 响应页面在指定的框架中显示。

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

示例代码分析与修正

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

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

<form id="myForm" action="" target="_blank">
  <div class="logo">
    <img src="./images/logo.png" alt="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>

在这段代码中，<form id="myForm" action="" target="_blank"> 明确指定了target="_blank"。这意味着无论表单的action属性指向何处（即使为空，默认指向当前页面），提交后都会在新标签页中打开。

1.1.8PbootCMS

PbootCMS是一款高效、简洁、强悍的开源PHP企业网站开发建设管理系统。 PbootCMS 1.1.8 更新日志：2018-08-07 1.修复提交表单多选字段接收数据问题； 2.修复登录过程中二次登陆在页面不刷新时验证失败问题； 3.新增搜索结果fuzzy参数来控制是否模糊匹配； 4.新增父分类，顶级分类名称及链接独立标签，具体见手册； 5.新增内容多图拖动排序功能。

243

查看详情

要解决此问题，只需从<form>标签中移除target="_blank"属性即可。

修正后的HTML代码：

<form id="myForm" action="">
  <div class="logo">
    <img src="./images/logo.png" alt="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。

注意事项与最佳实践

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

总结

解决HTML表单提交后在新标签页中打开的问题非常简单，核心在于识别并移除<form>标签中的target="_blank"属性。理解target属性的默认行为和其在不同场景下的作用，有助于开发者构建更加符合用户期望和体验的网页应用。在进行表单开发时，始终优先考虑用户体验，并谨慎使用会改变默认页面跳转行为的属性。

以上就是解决HTML表单提交在新标签页打开的问题的详细内容，更多请关注php中文网其它相关文章！