HTML5对表单进行了许多的改进，在这篇文章中，我选择了其中个人认为很有趣的三个变化：自动聚焦，对button元素的改进，把表单元素与非父元素的form表单挂钩进行简单的介绍。
1. 自动聚焦
自动聚焦的主要应用点是：我们可以为某个表单元素，如input设置一个autofocus属性，这样在这个页面刚刚加载出来的时候，这个input元素就会自动处于被选中的状态，直接可以进行输入，省去了用户手动选择的过程。这个特性使用js也可以做到，但是使用这个新特性无疑更加简单高效。
注意，autofocus属性只能用在一个input元素上，要是有几个元素都设置了这个属性，那么浏览器将会自动聚焦于最后一个设置了该属性的元素。
2. 对button元素的改进
HTML5为button元素添加了很多新的属性，原来的button元素在表单中的角色仅仅有三种，分别是“type=submit”、“type=reset”以及“type=button”。现如今，button元素相当于一个form表单的“大管家”。它可以：
- 使用form属性与指定的表单相关联
- 使用formaction属性覆盖form表单的action属性
- 使用formenctype属性覆盖form表单的enctype属性
- 使用formmethod属性覆盖form表单的method属性
- 使用formtarget覆盖form表单的target属性
- 使用formnovalidate属性覆盖form表单的novalidate，表明是否应该执行客户端数据有效性检查
所以现在我们可以在一个button元素中设置form表单的所有属性，如果你不嫌太过于拥挤的话。input元素也有如上所示的这些属性。
3. 把表单元素与非父元素的form表单挂钩
可能这个小标题表述的有些拗口，其实意思很简单，在HTML5之前，如果我们要提交一个人员信息的表单，我们需要把所有人员信息的输入框，选择框等等表单元素都放在一个form标签中，也就是说他们有公共的父元素。但是在HTML5的世界里，不在需要这样做了，我们只需要在开头声明一个form标签，给他设置一个id属性，然后我们就可以将那些表单元素分布在各个地方，唯一需要做的就是把这些表单元素的form属性值指定为所属的form表单的id值。代码如下所示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 </style> 9 </head> 10 <body> 11 <form id="myForm"> 12 <p> 13 <label for="uname">姓名：</label> 14 <input name="uname" type="text" autofocus="autofocus"/> 15 </p> 16 </form> 17 <p> 18 <label for="uage">年龄：</label> 19 <input name="uage" type="text" form="myForm"/> 20 </p> 21 <button form="myForm" type="submit">Submit</button> 22 <button form="myForm" type="reset">Reset</button> 23 </body> 24 </html>