html5新增了很多的input类型,省去了前端开发者写javascript,调用插件等一系列麻烦的操作,下面介绍一些新增的类型。注释直接写在HTML代码里了:
H5中新增的input标签/*search类型专用于“搜索”,可以在输入后点击“X”直接清空输入框*/
search----
/*tel类型用于输入电话号码,在pattern里写正则,title写提示错误信息*/
tel----
/*url类型用于匹配url,要求输入须为http://或https://开头*/
url----
/*email类型要求输入必须是邮箱格式,使用required属性则要求必填,multiple属性则允许输入多个,输入多个时使用西文字符,分割*/
email----
/*datetime类型貌似各浏览器暂不支持,按照H5规范应该是输入时间日期类型,可以自己写个正则去验证*/
datetime----
/*date类型要求输入年月日,不用使用插件,可以调用出选择年月日的面板*/
date----
/*month类型要求输入年月,同上*/
month----
/*week类型要求输入X年第X周,同上*/
week----
/*time类型要求输入X时X分,同上*/
time----
/*number类型要求输入整数,用min和max控制大小,step控制“跳数”*/
number-----
/*range类型提供了一个滑动条,以step为跳数,max和min控制大小,根据匹配的output标签的id来控制默认的大小,看下面的图就明白了*/
range----
50
/*color类型要求输入颜色,会自动调用颜色选择窗,很方便*/
color----
/*file类型可以使用multiple控制是否选择多个,accept控制选择的文件类型*/
file----
这些新增的input类型在chrome和opera浏览器里支持得比较好,但是各浏览器表现出来可能各有差异。这些类型大部分时为移动端服务等 像这些input 验证 在小屏幕终端 就能直接呼出不同的键盘,提交表单前验证节省流量
另外:form标签还有一个属性:formnovalidate。使用该属性可以取消该表单里的所有验证,个人感觉没什么用。在H5规范里input标签里有个novalidate属性,可以单独地取消某个input的验证,然后各浏览器并不支持,移动端现在也不支持,当初w3c写在了H5的规则里希望能有这种属性,可能以后会支持吧,个人感觉好像没什么卵用。