在前端开发中，表单是一个非常重要的元素。我们经常需要为用户提供一种方便的方式来“提交”数据。HTML 表单元素为此提供了一种易于使用和强大的机制。
本文将介绍一个具有两个提交按钮和两个“目标”属性的 HTML 表单。我们将深入探讨这个表单如何工作，以及如何在您的项目中使用它。
实现步骤
首先，让我们看看这个表单的 HTML 代码：
----- -------------------- ---------------- ------ ----------- -------------- ------- -------------------- ---------- ------- ----- -------------------- --------------- ------ ----------- -------------- ------- -------------------- ---------- -------
这里有两个表单，每个表单都有一个文本输入框和一个提交按钮。第一个表单的 action 属性指向 submit1.php，而第二个表单的 action 属性指向 submit2.php。另外，第一个表单的 target 属性设置为 _blank，意味着结果将在新窗口中打开，而第二个表单的 target 属性设置为 _self，意味着结果将在当前窗口中打开。
现在，让我们深入了解一下这个表单的工作原理。
工作原理
当用户点击任何一个提交按钮时，浏览器将首先检查该按钮所在的表单。如果该表单具有 action 属性，则浏览器将使用该属性指定的 URL 发送表单数据。
此外，如果该表单具有 target 属性，则浏览器将根据该属性的值确定如何显示结果。如果 target 属性设置为 _blank，则浏览器将在新窗口中打开结果页面；如果 target 属性设置为 _self（或者忽略该属性），则浏览器将在当前窗口中打开结果页面。
请注意，如果您想要在同一表单中处理不同的操作，请考虑使用单个表单和多个提交按钮。您可以使用 JavaScript 来捕获哪个按钮被点击，并相应地处理表单数据。
示例代码
以下是示例代码，其中包含两个提交按钮和两个“目标”属性的 HTML 表单：
----- -------------------- ---------------- ------ ----------- -------------- ------- -------------------- ---------- ------- ----- -------------------- --------------- ------ ----------- -------------- ------- -------------------- ---------- -------
您可以通过将 action 和 target 属性更改为自己项目中所需的值来使用此代码。此外，您可以根据自己的需要添加更多的表单元素（例如复选框、下拉列表等）。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12582