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

7 javascript forms html5 button

为什么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>
Run Code Online (Sandbox Code Playgroud)

但是,这对我有用:

<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>
Run Code Online (Sandbox Code Playgroud)

但在我的应用程序中,使用表单没有意义,因为我从来不想访问foo.jsp,我没有默认值.有没有办法在不使用虚拟值或默认表单的情况下进行编码工作a.jsp

小智 14

通常,form元素用于将数据发送到服务器.它包裹了指定数据inputbutton元素的元素.如果向按钮元素添加a name和a 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>
Run Code Online (Sandbox Code Playgroud)

formaction属性

使用该formaction属性,您可以为一个表单指定多个提交URL.由于元素不再需要该属性,因此您可以在提交按钮中定义提交URL.提交表单时,浏览器首先检查属性; 如果不存在,则继续在表单元素上查找属性.因此表单操作类似于后备或默认,它不是必需的:actionformformactionformactionaction

<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>
Run Code Online (Sandbox Code Playgroud)

如果您使用按钮上的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>
Run Code Online (Sandbox Code Playgroud)