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

HTML5 button.formaction Attribute Not Working Outside of <form>

本文关键字：form 不起作用 按钮 formaction 属性 HTML5      更新时间：2023-09-26

为什么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 ?

通常form元素用于向服务器发送数据。它封装了指定数据的元素，例如input或button元素。如果您将name和value属性添加到按钮元素中，您将把这个名称-值对发送到服务器。

如果你不需要发送任何(额外的)数据到你的服务器，只要使用链接元素和样式他们像按钮使用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属性;如果不存在，则继续在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>
相关文章：