表单提交后页面跳转行为如何通过 target 属性控制
form 标签的 target 属性用于指定表单提交后响应内容的显示位置，该属性可以被按钮上的 formtarget 属性覆盖。
表单提交后跳转位置的设置规则
form 标签的 target 属性用于指定表单提交后响应内容的显示位置，它是一个用于浏览上下文名称或关键字的字符串，例如标签、窗口或 iframe。该属性定义了表单提交后浏览器在哪里加载响应结果。默认情况下，如果未设置该属性，响应内容通常会在当前标签页中加载。MDN 文档指出，target 属性的值必须是一个有效的浏览上下文名称或关键字。关键字 _self 表示在当前浏览上下文中加载，这是默认行为。关键字 _blank 表示在新未命名浏览上下文中加载，这提供了与设置 rel=noopener 相同的行为，即不会设置 window.opener。关键字 _parent 表示在当前浏览上下文的父级上下文中加载，如果没有父级上下文，则行为与 _self 相同。关键字 _top 表示在顶级浏览上下文中加载，即当前上下文的祖先中且没有父级的上下文，如果没有父级上下文，则行为与 _self 相同。关键字 _unfencedTop 仅在嵌入 fenced frame 内的表单中使用，用于将响应加载到顶级 frame 中。
除了上述关键字，开发者也可以使用自定义的浏览上下文名称，这通常用于在页面中嵌入 iframe 并希望表单提交结果在该 iframe 中显示。例如，如果页面中有一个 id 为 resultFrame 的 iframe，可以将 target 属性设置为 resultFrame，这样表单提交后的响应就会在指定的 iframe 中渲染。需要注意的是，target 属性的值不能为空字符串，且在同一表单集合中必须唯一。如果页面中有多个表单，它们各自的 target 属性值应互不相同，以避免混淆响应的显示位置。此外，target 属性是全局属性，可以应用于任何 HTML 元素，但在表单元素中具有特定的语义含义。
按钮属性如何覆盖表单默认跳转行为
在表单中，除了在 form 标签上设置 target 属性外，还可以在具体的提交按钮上使用 formtarget 属性来覆盖表单的默认行为。formtarget 属性适用于 button 元素、input type=submit 元素以及 input type=image 元素。当这些元素具有 formtarget 属性时，它们提交表单时的目标浏览上下文将优先于 form 标签上的 target 属性。这意味着开发者可以为不同的提交按钮指定不同的跳转目标，从而实现更灵活的交互逻辑。例如，一个表单中可能有一个“保存”按钮用于在当前页面更新数据，而另一个“提交审核”按钮用于在新窗口中打开审核结果。
要验证这一行为，可以创建一个包含两个提交按钮的表单。第一个按钮不设置 formtarget，第二个按钮设置 formtarget=_blank。当用户点击第一个按钮时，表单提交后的响应将加载在当前浏览上下文中，遵循表单的 target 属性设置。当用户点击第二个按钮时，无论表单的 target 属性如何设置，响应都会在新窗口中打开。这种机制允许在不修改表单整体结构的情况下，为特定的操作定制提交行为。需要注意的是，formtarget 属性的值同样遵循 target 属性的规则，可以使用关键字或自定义的 iframe 名称。
不同浏览上下文的关键字含义与区别
target 属性和 formtarget 属性支持一组具有特殊含义的关键字，这些关键字定义了响应内容的加载位置。关键字 _self 是默认值，表示在当前浏览上下文中加载响应。关键字 _blank 表示在新未命名浏览上下文中加载响应，这通常会在浏览器中打开一个新的标签页或窗口。关键字 _parent 表示在当前浏览上下文的父级上下文中加载响应。如果当前上下文没有父级（例如，当前上下文是顶级上下文），则行为与 _self 相同。关键字 _top 表示在顶级浏览上下文中加载响应，即当前上下文的祖先中且没有父级的上下文。如果当前上下文没有父级，则行为与 _self 相同。
关键字 _unfencedTop 是一个较新的关键字，仅适用于嵌入 fenced frame 内的表单。它用于将响应加载到顶级 frame 中，这与在其他浏览上下文中加载响应的行为不同。开发者应确保在适当的上下文中使用这些关键字，以避免意外的导航行为。例如，在 iframe 中嵌入的表单中，使用 _parent 可能会导致响应加载在父级 iframe 中，而使用 _top 可能会导致响应加载在主页面中。理解这些关键字的区别对于控制表单提交后的用户体验至关重要。
验证表单提交跳转行为的检查步骤
要验证表单提交后的跳转行为是否符合预期，可以按照以下步骤进行检查。首先，在浏览器中打开包含表单的网页，并确保表单具有 target 属性或 formtarget 属性。其次，使用浏览器开发者工具（如 Chrome DevTools）的 Network 面板监控表单提交的请求。当用户点击提交按钮时，观察请求的响应是否在预期的浏览上下文中加载。如果表单设置了 target=iframeName，检查响应是否在 id 为 iframeName 的 iframe 中渲染。如果表单按钮设置了 formtarget=_blank，检查是否在新标签页中打开了响应。
如果验证结果不符合预期，可以检查表单的 target 属性和按钮的 formtarget 属性是否正确设置。确保 target 属性的值是一个有效的浏览上下文名称或关键字，并且 formtarget 属性的值没有被错误地设置为空字符串。此外，检查表单的 action 属性是否正确指定了处理表单提交的 URL。如果表单的 action 属性为空，浏览器可能会尝试提交到当前 URL。通过这些检查步骤，可以确认表单提交后的跳转行为是否符合设计要求。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。