HTML5中怎么使用Input类型
这篇文章给大家介绍HTML 5中怎么使用 Input 类型,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联专注于镶黄企业网站建设,响应式网站设计,商城系统网站开发。镶黄网站建设公司,为镶黄等地区提供建站服务。全流程按需定制,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
在提交表单时会自动验证email的格式
效果:
URL
在提交表单时会自动验证url的格式
效果:
NUMBER
可以限制输入的数字,step为上一个数字与下一个数字的间隔
效果:
RANGE
滑动条,能过选择性的对限制范围内的数值进行设置
效果:
Date Pickers(数据检出器)
HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
This is how Opera renders :
If you need a time to go with that date, Opera also supports :
If you only need a month + year (perhaps a credit card expiration date), Opera can render a :
Less common, but also available, is the ability to pick a specific week of a year with :
Last but not least, you can pick a time with :
地址:http://diveintohtml5.org/forms.html
以上都是从关于时间的都是网上找到,自己做的是这样的
其中图片中显示的UTC为世界统一时间
SEARCH
这里的datalist相当于下拉列表,可以进行选择
TELEPHONE
可输入一个电话号码
效果:
COLOR
可以获取颜色
效果:
以上个人图片效果显示均来自opera浏览器
下面图片时各主流浏览器对input的支持情况:
input标签表单类型的显示情况:
关于HTML 5中怎么使用 Input 类型就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前标题:HTML5中怎么使用Input类型
转载来源:http://scyanting.com/article/ggepee.html