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

为什么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，而且我没有默认值。有什么方法可以使formaction正常工作而无需使用虚拟值或将表单默认为a.jsp吗？

最佳答案

通常，form元素用于将数据发送到服务器。例如，它环绕指定数据的元素，即input或button元素。如果在按钮元素上添加name和value属性，则会将此名称-值对发送到服务器。

如果您不需要向服务器发送任何(其他)数据，则只需使用link元素，并使用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。由于action元素不再需要form属性，因此您可以仅在提交按钮的formaction中定义提交URL。提交表单后，浏览器首先检查formaction属性；如果不存在，它将继续在form元素上寻找action属性。因此，表单操作类似于回退或默认操作，它不是必需的:

<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>