在前端开发中,表单是一个非常重要的元素。我们经常需要为用户提供一种方便的方式来“提交”数据。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