稻草日志分享:html5新增的input表单类型

王亚兵7个月前 (09-18)HTML5CSS3109

前面已经提到了html5新增了甚多的标签,比如前面提到的语义化标签,媒体标签。同时在html5中也同样新增了一很多的表单属性。我们之前学的表单input的属性有很多了,比如text表单,还有我们的密码表单。以及我们的提交按钮,和图片按钮等等。那我们的html5又新增了那些属性的表单呢?

html5新增表单类型

首先需要给大家介绍的邮箱表单。他的用法只需要将input属性中的值改成“email”就可以了,当我们在提交表单的时候就会提示所填写的表单信息是不是邮箱格式的。如下面一个例子。我们水边在email属性表单内填写“123456”当我们提交时候就会提示我们格式出错。如图:

html5新增表单类型

是不是非常的人性化,除此之外,html5还新增加了很多使用的表单属性。比如tel手机号吗表单,当在pc端输入时其实看不出多大差别和text属性的表单。当我们用手机在输入框输入时,就会弹出数字键盘。所以很多html5新增的表单类型在移动端开发中应用的比较多。初次之外。html5还新增了如下的i表单类型。

html5新增表单类型

type表单类型
url
输入链接地址,如果输入错误会有提示
number
输入数字类型的内容,在移动端会自动的跳出数字键盘
date
输入日期类型的内容。会出现对应的日期选择窗口 ,type可以设置车鞥month选择年月,也可以设置成week,表示那一年的第几周
time
设置时间
color
投入颜色,可以弹出颜色选择器
search
搜索框类型的表单,和text的区别是会在末尾有个“x”符号,可以清楚搜索内容
range
这个会出现一个范围性的滑块
....
..........

通过上述新增表单的类型可以看的出来,我们html5对页面语义化的重视,几乎每一个类型的表单都会对应专门的type值。每一种表单类型也都会有对应的人性化的交互效果。所以,我们的html5还是有它自己的魅力的,如果想了解更多关于html5的知识,请继续关注稻草日志

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。