HTML5按钮元素新属性formaction,formenctype等简介 （转载）

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

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

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

您能够狠狠地点击这里：textarea示意form属性demo

这个demo页面的关键HTML代码以下示意：

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

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

若是form属性做用在按钮上，尤为是带有submit性质的表单提交按钮，则最终的行为表现是可能就是提交另一个<form>表单。

实例说话，您能够狠狠地点击这里：button按钮的form提交别的表单demo

页面上有两个表单元素，提交按钮在第二个表单元素里面，相关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、<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的页面，在本演示中是一个空白示意页面，效果以下图：

眼见为实，您能够狠狠的点击这里：button按钮formaction属性重置表单action demo

若是当前表单不是经过提交按钮提交？
表单提交，不必定老是经过点击提交按钮，还能够是输入框回车触发，亦或者是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但表单非按钮提交测试demo

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

3、<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了。

4、<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地址后面没有出现查询字符信息，以下截图：

如有兴趣，能够亲自点击感觉下，您能够狠狠的点击这里：button按钮formmethod属性重置demo

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

formnovalidate是一个布尔属性值，只能做用于具备提交性质的按钮（type='submit'/'image'）上，能够经过此按钮提交的表单不进行原生的数据验证，重置的是<form>元素的novalidate属性。

6、<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就在浏览器的新窗口打开啦！

您能够狠狠地点击这里：button按钮formtarget属性重置表单target demo

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

属性值
formtarget支持的属性值和表单元素的target属性如出一辙：

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

以上~

7、猝不及防结束语

本文介绍的formaction，formtarget等属性实用价值在于，能够对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>

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

用得少见得少不表明没有用，挖掘其潜力，发挥其价值，省时省力效果好。在CSS和HTML领域有不少不显山露水，但特殊场景很是好用的特性。虽然这些特性一般都有替代方案（虽然稍微啰嗦了点），好像不掌握也没什么事，加上不是常用，学习了不能当即产能，所以很天然以为有这个闲工夫，还不如去学学一些比较流行高大上的东西。

学习不必定有大用处的基础知识，和学习流行的上层收益迅速的事物其实是两种不一样的投资，一种是低风险长期高收益的长期投资，一种是高风险短时间收益高的短时间投资。比较建议的投资比例是前8后2，但，但现实世界并非这样子的，有太多太多人，在行情很是好的时候，不惜下杠杆去风险比较高的股市，正如如今前端形势比较好的时候，所有精力都用来学习各类工具和框架使用，站在将来的角度看，这实际上是风险至关高的一件事情。

若是再进一步深刻分析，或许就涉及到安全感的问题。例如本文的这些基础知识，因为不肯定性，假设我花了1个时间去了解，结果以后2年作项目都没有遇到适合使用这些属性的场景，那个人时间和精力岂不是白白的浪费掉了，很容易安全感缺失。可是若是我去学习Vue之类的框架，简历好看了，工做好找了，付出肯定有收益，肯定性效应让人老是乐于作这样的事情。

因此，虽然我屡次在各个场合强调基础知识的重要性，可是人性自己的特色使得绝大多数人都没法在这块坚持下去，由于学习一两个基础知识真的是一点用都没有，你要学习不少，至少要一两百个，才有足够的覆盖率，才能有从量变到质变的变化。

不过，换个角度想，这样其实也好，大浪淘沙，随着时间的不断推移，随着基础的不断累积，之后能和本身竞争的人就愈来愈少了，厚积薄发，高屋建瓴，越老越吃香，根本不用担忧所谓的中年危机，毕竟职业生涯40年，几乎全部的IT从业人员才刚开始开了个头。