HTML5对表单的一些有意思的改进

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>

转载于:https://www.cnblogs.com/enjoymylift/p/5982550.html

HTML5对表单的一些有意思的改进相关推荐

HTML5对表单的约束验证
在HTML5中增加了许多新的功能,用于表单提交到服务器之前对表单进行数据的验证(抢了javascript的饭碗),有了这些功能,即便是javascript没有加载进来还是可以确保基本的验证.换句话说, ...
HTML5表单元素禁用,禁用HTML5表单元素的验证
// suppress "invalid" events on URL inputs $('input[type="url"]').bind('invalid' ...
html5表单讲解,HTML5 表单新增元素与属性讲解
01 标签的control属性中文翻译:控制在HTML5中,可以再标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. form属性 Form属性 formaction属 ...
jquery对文本赋值和取值_jQuery对表单元素的取值和赋值操作代码
JS jQuery对表单元素的取值和赋值操作代码作者: 来源:www.28hudong.com2013-03-30 00:52:47 阅读次 $("#keyword")[0].v ...
jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...
基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览源码下载实现的代码: <div class="top"><d ...
html5表单验证没有效果,HTML5表单验证特性(知识点小结)
前台提交信息到后台一般两种常见提交方式: Form表单提交和 Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持解决方案: 可以在date ...
angularjs通过ng-change和watch两种方式实现对表单输入改变的监控
angularjs通过ng-change和watch两种方式实现对表单输入改变的监控直接上练习代码 <!DOCTYPE html> <html xmlns="http:/ ...

HTML5对表单的一些有意思的改进

HTML5对表单的一些有意思的改进相关推荐

最新文章

热门文章