html5新增的type类型,html5新增的type类型

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的规则里希望能有这种属性，可能以后会支持吧，个人感觉好像没什么卵用。

创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的html5新增的type类型,html5新增的type类型的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。