记录一下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">

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

发布了3 篇原创文章 · 获赞 0 · 访问量 69
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览