文档章节

IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

字数 795
阅读 11
收藏 0

f17848917d9549779b23fdf9246c22c3.jpg

 

HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1。

035409f874f94222aecd20ac3af205ce.jpg

 

1  autocomplete属性

autocomplete属性规定form或input域应该拥有自动完成功能,当用户在自动完成域中开始输入时,浏览器在该域中显示填写的选项。autocomplete适用于<form>标签,以及以下的<input>标签:text、search、url、email、password、date Picker、range以及color。autocomplete属性有可能在form元素中是开启的,而在input元素中是关闭的。用法如下:

37683f42c05a46a2adac5ff1a63041b9.jpg

上述代码展示了一个form表单,我们为form域打开添加自动完成功并关闭password密码域的自动完成功能。起初为表单填充我们想要的值,效果如图1所示:

084229395ec84ae6a799de3013806515.jpg

图1 autocomplete属性

 

自动填充功能提升了用户体验,为用户节省时间。当用户完成了某网站大量的表单输入,因为某一项不正确后返回表单页面后若需要重新填写所有项会影响用户体验,这时候为表单的某些输入域设置自动填充功能就能为用户省去大量时间。图2是返回后的表单:

c1f2c415f47143c1a88bf7d9511cf932.jpg

图2  autocomplete属性

 

因为我们为form开启了自动填充功能,所以表单中的文本域都被填充为提交前的数据,而密码框关闭了该功能,所以密码的内容滞空。

 

2  autofocus属性

autofocus属性规定在加载时,域自动获得焦点。autofocus属性时一个boolean属性,适用于所有<input>标签的类型。用法如下:

e73f748af3ae477f94a7e389ed841596.jpg

上述代码展示了一个form表单,在页面加载时,将焦点定到邮箱位置,效果如图3所示:

c94ae074c1e7480f84b7a384eb0a4c76.jpg

图3  autofocus属性

 

3  form属性

form属性规定输入域所属的一个或多个表单。form属性适用于<input>标签的类型,必须引用所属表单的id。如需引用一个以上的表单,使用空格分隔的列表。用法如下:

b657902c62004c8c8a02e8751cdb759b.jpg

上述代码包含了一个表单,其中先将姓名、密码、邮箱输入域包含在默认表单user_form里。之后通过form属性将url输入域包含在了这个表单里。

 

4  form overrides表单重写属性

表单重写属性允许重写form元素的某些属性设定。表单重写属性适用于的类型标签submit和image。表单重写属性包含表2。

表2  表单重写属性

 

1f9b1633e7744b8abb5386a207ad31b8.jpg

 

下面我们创造一个表单,给予它默认的action为“itxdl.php”,默认method属性为“get”,target属性为默认值“_self”,效果是在当前窗口打开。通过表单的重写属性来改变该表单的原来设置的属性。代码如下:

31817c5f3adb4928b9ccd2e0ac5816bf.jpg

© 著作权归作者所有

粉丝 1
博文 240
码字总数 230664
作品 0
东城
私信 提问
HTML5开发手机App之:HTML5系统教程-何韬-专题视频课程

HTML5开发手机App之:HTML5系统教程—23518人已学习 课程介绍 通过案例进行详尽的讲解,浓缩HTML5开发APP之前端基础语法,掌握HTML5的开发方法,为进一步的深入学习打下基础。 课程收益 使零...

pkutao
2016/02/04
0
0
25 个精彩的 HTML 5 教程

web开发者必须尽快熟悉并使用起HTML5,因为它在web端开发的发展趋势已经明朗,可以用来创建丰富多彩的效果。使用HTML5还是有一些复杂的,所以本文介绍了25个优秀的HTML教程及小手册,欢迎大家...

小卒过河
2011/11/16
4.2K
4
全新改进的 HTML5 表单创建

经历了12年之久,万维网的核心语言(HTML或超文本标记语言)终于迎来了HTML5主要修订版本。虽然万众期待的版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就有...

小卒过河
2011/07/23
4.2K
16
22 非常有用 HTML5 + CSS3 表单教程

使用 HTML5 和 CSS3 你可以创建各种创新的 Web 表单,在接下来的内容中我们将为你推荐 22 个这样的教程。 登录表单 HTML5 & CSS3 联系表单 构建一个简单的联系表单 样式漂亮的联系表单 用户注...

小编辑
2011/10/24
6.4K
3
推荐 10 个优秀的 HTML5 编码工具

HTML5将彻底改变我们建设网站和Web应用程序的方式。这里有10个伟大的工具,用于简化和提高HTML5的编码。 假如你才刚开始利用HTML5来创建网站,可访问Initializr来入门。这个网站将帮您根据样...

小编辑
2011/08/22
3.2K
8

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7 部署 redis 5.0.6 集群

环境 操作系统: CentOS7.7,关闭 firewalld 和 selinux Redis: 5.0.6 master 实例 10.0.4.110:6371 10.0.4.110:6372 10.0.4.110:6373 slave 实例 10.0.4.111:6371 10.0.4.111:6372 10.0.4.1......

俊赛潘安-才比管乐
12分钟前
3
0
怎么录制电脑上视频素材的声音

随着短视频的不断发展人们越来越喜欢利用空闲时间观看一些短视频用以打发零碎的时间,不少人发现这个机遇也匆匆走上制作短视频的道路,在制作短视频时配音是至关重要的,那你知道怎么在视频素...

cenfeng123
21分钟前
4
0
[springboot 开发单体web shop] 6. 商品分类和轮播广告展示

商品分类&轮播广告 因最近又被困在了OSGI技术POC,更新进度有点慢,希望大家不要怪罪哦。 上节 我们实现了登录之后前端的展示,如: 接着,我们来实现左侧分类栏目的功能。 商品分类|Produc...

IsaacZhang
21分钟前
3
0
java 静态代码块,代码块,构造方法执行顺序

回顾一下java的执行顺序 public class Demo { public Demo() { super(); System.out.println("this is Demo"); } static { System.out.println("this is static"); } { System.out.println("......

漫步行者
40分钟前
7
0
滴滴面试题答案思路

1.mysql 1.1.介绍下介绍下innodb的索引类型、数据结构 普通索引,唯一索引,主键索引:也就是聚簇索引,全文索引(FULLTEXT),聚集索引,非聚集索引等。 数据结构B+树: B+树特点 1.矮胖型,...

指尖Coding
43分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部