HTML5按钮元素新属性formaction,formenctype等简介

一、<button>等元素新增HTML5属性 – form

在过去,表单元素 <form> 和表单提交需要的一些控件元素(如 <input><select> )在DOM结构上必须是父子关系,但是在HTML5背景下,表单元素和控件元素可以是在页面文档的任何位置,这种特性的实现就是通过使用 form 属性。

关于HTML5新增的 form 属性,我在六年前就介绍过,不过那篇文章是使用 <textarea> 元素示意的。

这个demo页面的关键HTML代码如下示意:

<form id="contact_form" >...</form>
评论:<textarea id="comments" name="comment" form="contact_form"></textarea>

<textarea> 元素在 <form> 元素的外面,而不是祖先和后代的关系,但是,当我们在表单里面填写数据并提交的时候,会发现 <textarea> 控件中的数据一起提交了。

图0:HTML5按钮元素新属性formaction,formenctype等简介

图1:HTML5按钮元素新属性formaction,formenctype等简介

如果 form 属性作用在按钮上,尤其是带有submit性质的表单提交按钮,则最终的行为表现是可能就是提交另外一个 <form> 表单。

页面上有两个表单元素,提交按钮在第二个表单元素里面,相关HTML代码如下:

<form id="form1">
    表单序号:<input name="formIndex" value="1" readonly>
</form>
<form id="form2">
    表单序号:<input name="formIndex" value="2" readonly>
    <input type="submit" value="提交" form="form1">
</form>

结果,点击提交按钮,提交的是第一个表单,如下图:

图2:HTML5按钮元素新属性formaction,formenctype等简介

此时提交按钮俨然变成了一个“间谍”。

二、<button>元素新增HTML5属性 – formaction

formaction 属性只能作用于具有提交性质的按钮( type='submit'/'image' )上,作用和名称一样,如果通过当前按钮提交表单,在表单提交地址会使用 formaction 属性值而不是 form 元素的 action 属性值。

举个简单的例子,续用上面的案例:

<form id="form1">
    表单序号:<input name="formIndex" value="1" readonly>
</form>
<form id="form2">
    表单序号:<input name="formIndex" value="2" readonly>
    <input type="submit" value="提交" form="form1" formaction="blank.html">
</form>

结果,点击提交按钮后,去往的不是的当前页了,而是名为blank.html的页面,在本演示中是一个空白示意页面,效果如下图:

图3:HTML5按钮元素新属性formaction,formenctype等简介

如果当前表单不是通过提交按钮提交?

表单提交,不一定总是通过点击提交按钮,还可以是输入框回车触发,亦或者是JS form.submit() ,如果是这类提交,那 formaction 属性还有效吗?

如下测试代码:

<form>
    表单序号:<input name="formIndex" value="1">(回车试试)
    input type="button" onClick="this.parentElement.parentElement.submit()" value="JS触发">
    input type="submit" value="提交" formaction="blank.html">
</form>

测试结果如下:

  1. 表单回车提交的时候, formaction 生效。这个比较好理解,一个表单,要想支持回车事件,需要加入一个submit性质的提交按钮就可以,其作用本质上就是回车的时候点击了提交按钮(如果在按钮上设置 onClick="alert(0)" ,回车时候会有弹出,可以证明这一点)。
  2. 如果是JS submit() 方法触发的提交,则 formaction 没有对表单提交的 action 进行重置,测试页面表现为提交到当前页面。

借助 formaction 属性可以实现一个表单内的两个按钮分别提交到不同地址的效果。

三、<button>元素新增HTML5属性 – formenctype

formenctype 属性只能作用于具有提交性质的按钮( type='submit'/'image' )上,作用和名称一样,如果通过当前按钮提交表单,在表单提交地址会使用 formenctype 属性值而不是 form元素的 enctype 属性值。

form 元素的 enctype 属性可以指定提交数据的编码方式。

  • 默认为 application/x-www-form-urlencoded ,可以理解为以url格式化规则格式化( % 开头那些)的字符串数据;
  • 可以设置为 multipart/form-data ,这是HTML5新增编码方式,可以理解为所有表单提交数据以二进制形式传输,于是我们可以Ajax直接上传图片等文件信息。通常当有 type="file"类型的 <input> 文件选择框的时候才使用。
  • 还可以是 text/plain ,表示纯文本,这个我自己目前并未使用过,套路不详。

由于 formenctype 属性值不太好测试,因此,就不show demo了。

四、<button>元素新增HTML5属性 – formmethod

类似的, formmethod 属性只能作用于具有提交性质的按钮( type='submit'/'image' )上,可以覆盖目标 <form> 元素的 method 属性值(默认为 get ),例如:

<form id="form1">
    表单序号:<input name="formIndex" value="1" readonly>
</form>
<form id="form2">
    表单序号:<input name="formIndex" value="2" readonly>
    <input type="submit" value="提交" form="form1" formmethod="post">
</form>

此时,点击提交按钮就是POST表单,URL地址后面没有出现查询字符信息,如下截图:

图4:HTML5按钮元素新属性formaction,formenctype等简介

五、<button>元素新增HTML5属性 – formnovalidate

formnovalidate 是一个布尔属性值,只能作用于具有提交性质的按钮( type='submit'/'image' )上,可以通过此按钮提交的表单不进行原生的数据验证,重置的是 <form> 元素的 novalidate 属性。

六、<button>元素新增HTML5属性 – formtarget

类似的, formtarget 属性只能作用于具有提交性质的按钮( type='submit'/'image' )上,可以覆盖目标 <form> 元素的 target 属性值(默认为 _self ),例如:

<form>
    表单序号:<input name="formIndex" value="1" readonly>
    <input type="submit" value="提交" formaction="blank.html" formtarget="_blank">
</form>

此时,blank.html就在浏览器的新窗口打开啦!

点击这里的按钮感受下吧~

图5:HTML5按钮元素新属性formaction,formenctype等简介

属性值

formtarget 支持的属性值和表单元素的 target 属性一模一样:

  • _self :提交于当前浏览器上下文。默认值(如果不设置)。
  • _blank :提交于新的未命名的浏览器上下文,在浏览器中的表现就是新开标签页。
  • _parent :提交于父的浏览器上下文,常见于iframe中,如果没有父级浏览器上下文,则效果等同于 _self
  • _top :提交于顶级浏览器上下文(最祖先的浏览器上下文)。如果没有,则行为表现等同于 _self

以上~

七、猝不及防结束语

本文介绍的 formactionformtarget 等属性实用价值在于,可以对JS触发的表单提交和点击回车触发的表单提交天然区分处理;以及实现同一个表单内控件元素的不同行为处理。

举个例子:

创建一条新数据域修改一条数据,用户需要输入的内容几乎都是一模一样的,这意味新建的表单和修改的表单其实可以共用的,但其中必然还是有一些差异的,举个例子,新增数据的表单 action 地址可能是 add.php ,而修改的可能是 edit.php 。以前我们做法可能是根据场景不同使用JS去修改 <form> 元素的 action ,同时改变提交按钮,而现在少了一步,只需要控制提交按钮的显隐就可以了:

<form action="add.php">
  <input type="submit" value="新建">
  <input type="submit" value="修改" formaction="edit.php">
</form>

除了实现更精简,最大的好处是更加语义化了。

加载余下内容▼

相关文章:

;