在网站开发中，表单是不可避免的一部分。然而，除了表单自身的输入验证和提交功能之外，表单提交的目标URL地址也是很重要的。默认情况下，当用户点击表单中的“提交”按钮时，表单数据将发送到表单的“Action”属性所指定的URL上。但是，有时您可能需要在提交相同的表单时将数据发送到不同的URL地址上。这时候，就需要使用HTML表单中的“formaction”属性来实现这一目的。

在本文中，我们将深入讨论“formaction”属性，并了解如何将其用于网站开发中的表单。

1. 什么是formaction属性？

“formaction”是一个HTML表单元素中的属性，它定义了表单数据在提交之后将被发送到的URL地址。当一个表单元素被提交时，如果它具有“formaction”属性，则表单数据将被发送到该属性值所指定的URL地址。该属性将覆盖表单的默认“Action”属性。

以下是一个被定义了“formaction”属性的例子：

```

```

在上面的代码中，当用户点击“登录”按钮时，表单数据将被发送到“login.submit.php”这个新地址。同时，当用户点击“注册”按钮时，表单数据将被提交到表单默认的“Action”属性所指定的“login.php”地址。

2. 为什么要使用formaction属性？

使用“formaction”属性来指定表单提交后的URL地址，有以下优点：

2.1 简化代码

如果您在网站中需要多个不同的提交URL地址，使用“formaction”属性可以将这些处理留给浏览器，从而简化您的代码。 比如，现在我们有一个“搜索”表单，它需要在两个不同的页面上使用。在多个页面上使用同样的代码的最简单方法是将“Action”属性设置为页面本身，然后在接收时根据URL参数做出相应的响应。但是，这样的实现需要使用JavaScript来检测URL参数，并在用户进行搜索时动态更改表单的“Action”属性。

使用“formaction”属性，您只需要在需要提交表单的页面上设置正确的“formaction”值即可。这样可避免使用JavaScript和动态更改“Action”属性的需求。代码量不仅变少了，而且也更整洁。

2.2 提升性能

使用“formaction”属性，浏览器可以更快地将表单数据发送到目标地址。由于浏览器不需要重定向请求到不同的URL地址（根据表单“Action”属性），所以这种技术可以提高提交表单的效率。

2.3 支持前端路由

当您使用单页应用程序（SPA）等前端路由时，“formaction”属性可以使您的表单与应用程序框架实现无缝结合。通过在表单中使用“formaction”属性，您可以在URL改变时更新提交URL地址（例如，当应用程序从“/home”导航到“/users”时）。这样，表单将发送到与URL相关联的地址。

3. 如何使用formaction属性

使用“formaction”属性很简单。只需要在表单元素中新增“formaction”属性，并将其值设置为您希望将表单数据发送的URL地址，如下：

```

登录

```

如果表单还具有“Action”属性，那么“formaction”属性将可以覆盖它，如下：

```

```

在上面的代码中，“登录”按钮使用了“formaction”属性，因此表单数据将被发送到“login.submit.php”这个新地址。但是，“注册”按钮没有使用“formaction”属性，所以表单数据将被提交到表单默认的“Action”属性所指定的“login.php”地址。

4. 注意事项

在使用“formaction”属性时，有一些注意事项需要注意：

4.1 formaction属性必须在button或input元素上才能生效

“formaction”属性不是在“form”元素上设置的，而是在提交按钮或包含提交的输入元素上设置的。这意味着，如果您使用JavaScript在表单中动态创建submit按钮，则需要将“formaction”属性添加到此按钮元素上才能正确工作。

4.2 如果省略formaction属性，则提交数据到Action属性所指定的URL地址

如果提交按钮没有“formaction”属性，则表单数据将按照默认的“Action”属性所指定的URL提交。

4.3 跨站脚本（XSS）攻击

请注意，在使用“formaction”属性时，如果用户可以修改该属性的值，则该表单将面临XSS攻击的风险。

例如，在下面的代码中，我们使用了一个表单元素和一个input元素，其中input元素包含“formaction”属性：

```

```

由于输入元素中的“formaction”属性可以被用户修改，因此攻击者可以通过将input元素的“formaction”属性更改为恶意URL来提交表单数据。这将导致表单数据发送到一个攻击者控制的URL地址，从而执行恶意操作。

为了避免此类攻击，开发人员应该进行服务器端验证，以确保所提交的表单数据是合法的。

5. 结论

在本文中，我们学习了“formaction”属性并了解了如何在网站开发中使用它来优化表单提交。由于在使用表单时，很少有网站只负责一个目标的功能。因此，使用“formaction”属性将会为您的网站提供良好的用户体验和效率。

如果您正在开发一个需要提交到多个目标的表单，那么使用“formaction”属性将是一种理想的解决方案。通过使用它，您可以优化您的代码并提高表单的性能。因此，在下一次表单提交中，请考虑使用“formaction”属性。