[TOC] >[success] # 新引入的type 属性 ~~~ 1.必须提交才能出发 2.只支持ie9往上的浏览器 ~~~ | 标签 |描述 | | --- | --- | | email | html5 中新增的邮箱-验证 | | tel | tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘 | |url | 验证只能输入合法的网址：必须包含http:// | | number | 只能输入数字(包含小数点)，不能输入其它的字符，max:最大值，min:最小值，value:默认值 | | search | 以提供更人性化的输入体验多一个删除input框内容按钮 | | range | 范围输入条:范围 max 最大值，min 最小值，value默认值 不填写默认中间 | | color | color选择颜色 | | time | 时间：时分秒| | data | 日期：年月日 | | datetime | 大多数浏览器不能支持datetime.用于屏幕阅读器- | | datetime-local | 期和时间 | | month | 月份 | | week | 一年中的第几周 | >[danger] ##### 案例 ![](https://box.kancloud.cn/65c6345f8e437f08667cec191f77684e_355x432.png) ~~~ html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> header{ display: block; width: 100%; height: 100px; background-color: red; } </style> </head> <body> <form action=""> <!--提交触发--> <!--html4 中的验证,文本和密码--> 文本：<input type="text"> <br> 密码：<input type="password"> <p>分割线</p> <!--html5 中新增的邮箱-验证--> 邮箱：<input type="email"> <br> <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。 如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看--> 电话：<input type="tel"> <br> <!--验证只能输入合法的网址：必须包含http://--> 网址：<input type="url"> <br> <!--number：只能输入数字(包含小数点)，不能输入其它的字符 max:最大值 min:最小值 value:默认值--> 数量：<input type="number" value="60" max="100" min="0"> <br> <!--search：可以提供更人性化的输入体验多一个删除input框内容按钮--> 请输入商品名称：<input type="search"> <br> <!--range:范围 max 最大值 min 最小值 value默认值 不填写默认中间 --> 范围：<input type="range" max="100" min="0" value="50"> <br> 颜色：<input type="color"> <br> <!--time:时间：时分秒--> 时间：<input type="time"> <br> <!--date：日期：年月日--> 日期：<input type="date"> <br> <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器--> 日期时间：<input type="datetime"><br> <!--datetime-local:日期和时间--> 日期时间：<input type="datetime-local"> <br> 月份：<input type="month"> <br> 星期：<input type="week"> <input type="submit"> </form> <script src="../js/html5shiv.min.js"></script> </body> </html> ~~~