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

Posted

技术标签:

【中文标题】HTML5 button.formaction 属性在 <form> 之外不起作用【英文标题】:HTML5 button.formaction Attribute Not Working Outside of <form> 【发布时间】:2014-07-28 03:15:59 【问题描述】:

为什么button.formaction 属性在&lt;form&gt; 之外不起作用?

这失败了:

<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 元素用于向服务器发送数据。它环绕指定数据的元素,例如inputbutton 元素。如果您将namevalue 属性添加到您的按钮元素,您会将此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>

【讨论】:

以上是关于HTML5 button.formaction 属性在 <form> 之外不起作用的主要内容,如果未能解决你的问题,请参考以下文章

如何直接通过文本设置 HTML5 视频字幕?

关于HTML5如何自定义属性

勇闯海的尽头!HTML5游戏《黄金渔场》热力公测!

3D爱心的制作

React的class组件及属性详解!

canvas ---1