HTML 在新标签页中提交HTML表单

在本文中，我们将介绍如何使用HTML在新的标签页中提交HTML表单。通常情况下，HTML表单会在当前标签页或者替换当前标签页中进行提交。但是，有时我们希望在新的标签页中显示提交后的结果，这种情况下就需要在HTML中进行相应设置。

阅读更多：HTML 教程

在新标签页中提交表单的方法

要在新的标签页中提交HTML表单，我们需要使用target属性。该属性指定提交表单后将在哪个窗口、框架或标签页中显示结果。target属性的值可以是以下三种类型之一：

“_blank”：在新的标签页中打开结果；
“_self”：在当前标签页中替换当前内容；
“_parent”：在父级框架中显示结果。

下面是一个例子，演示如何在新的标签页中提交表单。

<form action="submit.php" method="post" target="_blank">
  <input type="text" name="name" placeholder="请输入您的姓名" required>
  <input type="email" name="email" placeholder="请输入您的电子邮件" required>
  <input type="submit" value="提交">
</form>

在上面的例子中，我们在表单的target属性中设置了”_blank”，这意味着表单提交后结果将在新的标签页中展示。

控制新标签页的打开方式

除了直接在HTML中设置target属性来控制在新标签页中打开结果外，我们还可以使用JavaScript来动态控制打开方式。下面是一个例子：

<form action="submit.php" method="post" onsubmit="openNewTab()">
  <input type="text" name="name" placeholder="请输入您的姓名" required>
  <input type="email" name="email" placeholder="请输入您的电子邮件" required>
  <input type="submit" value="提交">
</form>

<script>
function openNewTab() {
  window.open("", "_blank");
}
</script>

在上面的例子中，我们使用onsubmit属性来调用JavaScript函数openNewTab()。该函数使用window.open()方法在新的标签页中打开一个空白页面，然后表单将在这个新标签页中提交。

打开结果标签页的属性设置

除了在HTML中设置target属性或使用JavaScript来控制打开方式外，我们还可以对打开结果标签页进行更多的属性设置，例如标签页的大小、位置等。下面是一个例子：

<form action="submit.php" method="post" onsubmit="openNewTab()">
  <input type="text" name="name" placeholder="请输入您的姓名" required>
  <input type="email" name="email" placeholder="请输入您的电子邮件" required>
  <input type="submit" value="提交">
</form>

<script>
function openNewTab() {
  var windowFeatures = "width=800,height=600,menubar=no,toolbar=no";
  window.open("", "_blank", windowFeatures);
}
</script>

在上面的例子中，我们将windowFeatures字符串设置为”width=800,height=600,menubar=no,toolbar=no”，这表示结果标签页将具有800×600像素的大小，并且不包括菜单栏和工具栏。

总结

通过使用target属性、JavaScript以及属性设置，我们可以轻松地在HTML中实现在新的标签页中提交HTML表单的功能。这为用户提供了更好的交互体验，使他们能够方便地同时浏览提交前和提交后的内容。记住根据具体的需求选择打开方式，并可以通过属性设置对结果标签页进行定制化配置。希望本文对你理解在新标签页中提交HTML表单有所帮助！