记录一下H5新增的表单type属性

今天学习了一下h5表单新增的type属性，想在此记录一下以后忘记了可以来掘金瞄一眼（还是想偷个懒）

email

input中type类型设置为email表示要求输入一个邮箱，之前我们都是使用type="text"来收集数据然后再用js正则表达式对其进行校验，而设置为email它会自动的对其value值进行验证。

邮箱:<input type="email">

当我们随便输入一些数字再点击提交的时候，就会弹出下面的提示：

url

网址:<input type="url">

同样的我们随便输入一些数字再点击提交的时候：

tel

电话:<input type="tel">

当我们将type设置为tel的时候表示输入的值应为一个电话号码，但是我们输入英文的时候也没有弹出提示，这是因为tel是在给移动端的时候用的，当我们点击这个表单就会弹出来一个数字键盘。

search

搜索:<input type="search">

type设置为search在我们搜索的时候经常用到，这个时候你输入文字的时候右边就会出现一个×，可以删除掉你输入的内容。

number

数字:<input type="number" value="60" max="100" min="0">

type设置为number表示输入的值应为数字，我们尝试输入汉字和字母都是没有反应的，同时我们可以设置一个默认值最大值和最小值。

color

颜色:<input type="color">

将type设置为color的时候点击表单就会弹出一个颜色选择器

range

范围:<input type="range" value="60" max="100" min="0">

range跟number比较类似这里就不多说了。

time

时间:<input type="time">

date

日期:<input type="date">

type设置为date点击表单的小三角形的时候回弹出一个选择日期的控件，能够选择到年月日。

还有个地方要注意一下，如果你还想显示时分秒的话，当设置为datetime的时候大多数浏览器是不支持的，只有safari支持，这个时候我们可以将type设置为datetime-local，就能选择到日期时间了。

month

月份:<input type="month">

week

周:<input type="week">

今天大概就上面这些了，天气比较冷手指都冻僵了，喜欢的朋友可以帮忙点个赞。