HTML5 button.formaction 属性在 <form> 之外不起作用

Posted 2023-02-22

【中文标题】HTML5 button.formaction 属性在 <form> 之外不起作用

【英文标题】：HTML5 button.formaction Attribute Not Working Outside of <form>

【发布时间】：2014-07-28 03:15:59

【问题描述】：

为什么button.formaction 属性在<form> 之外不起作用？

这失败了：

<button type="submit" formaction="a.jsp">a<button>
<button type="submit" formaction="b.jsp">b<button>
<button type="submit" formaction="c.jsp">c<button>

但是，这对我有用：

<form action="foo.jsp" method="post">
    <button type="submit" formaction="a.jsp">a<button>
    <button type="submit" formaction="b.jsp">b<button>
    <button type="submit" formaction="c.jsp">c<button>
</form>

但在我的应用程序中，使用表单对我来说没有意义，因为我不想访问 foo.jsp，而且我没有默认值。是否有某种方法可以在不使用虚拟值或将表单默认为 a.jsp 的情况下使 formaction 工作？

【问题讨论】：

我不知道，但一个名为 formaction 的属性似乎只适用于 form。

是的，这是有道理的。我想我想了解的是，将其与规范中的表格联系起来的原因是什么？只是将演示与逻辑分开吗？那为什么要引入formaction...？

既然你在做一个formaction，它会在request中发送form数据。所以你需要一个表单来提交。

如果困扰您的是虚拟操作属性，请不要指定它

【参考方案1】：

一般form 元素用于向服务器发送数据。它环绕指定数据的元素，例如input 或button 元素。如果您将name 和value 属性添加到您的按钮元素，您会将此name-value-pair 发送到您的服务器。

如果您不需要向服务器发送任何（额外）数据，只需使用链接元素并使用 CSS 将它们设置为按钮样式：

<a href="a.jsp" class="btn">a</a>
<a href="b.jsp" class="btn">b</a>
<a href="c.jsp" class="btn">c</a>

formaction 属性

使用formaction 属性，您可以为一个 表单指定多个提交URL。因为form 元素不再需要action 属性，所以您可以在提交按钮的formaction 中定义提交URL。提交表单时，浏览器首先检查formaction 属性；如果不存在，它将继续在表单元素上查找 action 属性。所以 form 动作 类似于后备或默认，它不是必需的：

<form method="post">    
    <input type="text" name="my-data" value="my data"/>

    <button type="submit" formaction="a.jsp">a</button>
    <button type="submit" formaction="b.jsp">b</button>
    <button type="submit" formaction="c.jsp">c</button>        
</form>

如果您使用按钮上的form 属性 来引用关联的表单（id 值），您甚至可以将按钮放在form 元素之外：

<form method="post" id="myForm">
    <input type="text" name="my-data" value="my data"/>
</form>

<button type="submit" formaction="a.jsp" form="myForm">a</button>
<button type="submit" formaction="b.jsp" form="myForm">b</button>
<button type="submit" formaction="c.jsp" form="myForm">c</button>