简介
HTML5 拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证。其中比较常用的有color,date,datetime,email,month,number,range,search,tel,time,url,week本篇文章对一些常用的HTML5 input进行讲解。
input color类型
color类型的input字段用于选取颜色,浏览器(不同浏览器可能展示不同)默认提供一个颜色选择器,可以选取颜色也可以输入颜色代码,当然选取的值还得写程序去获取。
Document选择颜色:
input date类型
date类型是input字段是一个日期控件,方便用户输入日期
日期:
与date类似作用的是time类型,它提供的是一个时间选择器。
时间:
input email类型
email类型的表单会自动校验输入值是否合法邮箱
E-mail:
input month类型
month类型的input字段定义一个月份和年份的控件。
月和年:
input week类型
week类型的input字段定义一个周次和年份的控件。一年的第一个星期一 为第一周开始。
周次和年:
input number类型
number类型的input会验证值是否为数字,同时也可以设置值的区间。
IE9 以下版本浏览器兼容HTML5的方法
数字1~5:
input rang类型
rang类型的input定义一个滑动条,可以滑动选值,需要设置值区间。
Value:
input url类型
url类型的表单会校验输入的值是否合法url。
主页:
input tel类型
tel类型定义输入电话号码字段,该字段被浏览器识别保存后,下次会推荐输入值,但对号码验证似乎还没比较好的支持。
电话号码:
input search类型
search类型定义一个搜索字段,类似搜索引擎,该类型会对值进行保存和推荐。
Search:
HTML5 input的输入类型很多,但主流浏览器对这些类型的支持情况不一样,使用前建议参考浏览器兼容性。