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值。代码如下所示：
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

         </style>

     </head>

     <body>

         <form id="myForm">

             <p>

                 <label for="uname">姓名：</label>

                 <input name="uname" type="text" autofocus="autofocus"/>

             </p>

         </form>

         <p>

             <label for="uage">年龄：</label>

             <input name="uage" type="text" form="myForm"/>

         </p>

         <button form="myForm" type="submit">Submit</button>

         <button form="myForm" type="reset">Reset</button>

     </body>

 </html>


HTML5对表单的一些有意思的改进的更多相关文章

  1. HTML5对表单的约束验证

    在HTML5中增加了许多新的功能,用于表单提交到服务器之前对表单进行数据的验证(抢了javascript的饭碗),有了这些功能,即便是javascript没有加载进来还是可以确保基本的验证.换句话说, ...

  2. IT兄弟连 HTML5教程 HTML5表单 HTML表单中的get和post方法

    指引 表单在网页应用中十分重要,基本上任何一个网站都必须使用到表单元素,所以表单的美观和易于交互对于网站设计就变得十分重要.HTML5对目前Web表单进行了全面提升,使得我们使用表单更加智能.它在保持 ...

  3. HTML5 表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...

  4. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

  5. HTML5学习笔记五：html5表单

    表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素 ...

  6. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

  7. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  8. html5表单新增的元素与属性

    1.表单内元素的form属性 在html4中,表单内的从属元素必须书写在表单内部, 而在html5中,可以把他们书写在页面上任何地方, 然后为该元素指定一个form属性,属性值为该表单的id,这样就可 ...

  9. HTML5表单新增元素与属性

    form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...

随机推荐

  1. Mybaits插入记录返回主键值

    某些情况进行insert时不知道主键值(主键为自增),例如系统新增用户时,有用户序号(主键 自增),用户名,密码.插入时只需插入用户名和密码,之后取得mysql自增的序号. 如下为mysql的usr表 ...

  2. react相关知识点链接整理

    1.React组件之间的通信 2.中间件做代理解决跨域问题 3.不要再问我跨域的问题了 4.React 组件数据流 && 组件间沟通 5.如何理解虚拟DOM 6.react性能调谐与d ...

  3. C 堆内存管理

    在Win32 程序中每个进程都占有4GB的虚拟地址空间,这4G的地址空间内部又被分为代码段,全局变量段堆段和栈段,栈内存由函数使用,用来存储函数内部的局部变量,而堆是由程序员自己申请与释放的,系统在管 ...

  4. Hibernate 性能优化一对一关联映射

    概述: hibernate提供了两种映射一对一关联的方式:按照外键映射和按照主键映射. 下面以员工账号和员工档案为例 ,介绍两种映射方式,并使用这两种映射方式分别完成以下持久化操作: (1)保存员工档 ...

  5. CentOS7下开启端口

    开启端口: firewall-cmd --zone=public --add-port=80/tcp --permanent 含义: --zone #作用域 --add-port=80/tcp #添加 ...

  6. sftp java 上传

    1. 注意问题 uri的格式: sftp://zhangsan:123456@10.10.10.10:22 dir问题 : 判断有没有 没有创建 然后进入 类推 config问题: StrictHos ...

  7. UOJ#288：基础数据结构练习题

    题面 UOJ Sol 玄学,不会势能分析 所以 维护区间最大最小值 把开根变成区间减法 如果最大值开根后的变化量和最小值的相等,就直接打个减法\(lazy\) # include <bits/s ...

  8. 什么是APP？？？APP的开发类型又分哪几种？？？

    开发者们都知道在高端智能手机系统中有两种应用程序: 一种是基于本地(操作系统)运行的APP —-Native App: 一种是基于高端机的浏览器运行的App —-WebApp因为这些高端智能手机(Ip ...

  9. response.setHeader()下载的用法

    1. HTTP消息头 (1)通用信息头 即能用于请求消息中,也能用于响应信息中,但与被传输的实体内容没有关系的信息头,如Data,Pragma 主要: Cache-Control , Connecti ...

  10. 扩展javascript原生对象

    原文地址: http://javascript.info/tutorial/native-prototypes 原生的javascript 对象在prototypes里面保存他们可用的方法. 比如,当 ...