input type 类型

input type 类型

html5 中的input 的type属性新增了很多有趣的类型,一直没时间记录一下,最近晚上不加班,就记录一下这些有趣的属性值

非html5

1. text： 定义单行的输入字段，用户可在其中输入文本
2. password：定义密码字段，会显示自符掩码
3. file: 用来选择文件,文件上传
4. radio： 定义单选按钮
5. checkbox：定义复选框
6. hidden： 定义隐藏的输入字段(通常作为隐藏域来存储一些值)
7. button： 定义可点击按钮（大多数情况下需要通过JavaScript来控制事件）
8. image： 定义图像形式的提交按钮
9. reset： 定义重置按钮，重置按钮会清除form表单所有内容
10. submit： 定义提交按钮，提交按钮会把form表单数据发送到服务器

这些都是常用的，就不一一过多的介绍了，下面重点登场

html5 新增属性值

1. color：定义拾色器，允许重拾色器中选择颜色；

   这是我挺喜欢的一个属性值,以前颜色选择还得使用各种插件,现在直接一个标签全部搞定,简单的不能再简单了(请原谅我的废话)

   实例：

    <input type="color" value="#75d29a">
   

   效果：
   

2. 时间和日期选择器

   这个也是将时间选择简化到底,以后选择时间只需要一个标签,拥有多个供选择日期和时间的新的输入类型：

   1. date - 选择日、月、年
   2. month - 选择月、年
   3. week - 选择周、年
   4. time - 选择时间（时、分）
   5. datetime - 选择时间、日期、月、年（UTC 时间）
   6. datetime-local - 选择时间、日期、月、年（本地时间）

   可以自由选择组合，可以精确到月，周，日期等等

   实例:
   

   效果：
   

3. number：包含数值的输入域

   number类型只能输入数字，可以点击最右边的上下小尖头调节大小，值得一提的是，该属性值，只手机上会调用数字键盘，以下是一些可以对数值做限定的属性：

   max：{number} 可输入的最大值
   min：{number} 可输入的最小值
   step： {number} 规定合法的数字间隔，就相当于是step的整数倍(例如step=5,那么合法的数只能是5的倍数,-5,0,5,10…)

   实例：
   

   效果：
   

4. email:输入类型应该是邮件地址，提交表单时会验证

   实例：
   

   效果：
   

5. url:定义包含url的输入域(验证不标准，https、缺少//、www等都可验证通过)

   实例：
   

   效果：
   

6. search:顾名思义，就是搜索框

   刚开始用这个的时候还挺兴奋，后面的小叉挺好的，移动端还能将键盘的enter改为search，但是有坑啊，因为默认样式，不同的手机显示样式是不同的，只能移除默认样式，
   自己搞一套，这就很不爽了，希望有同学使用的时候会注意。

   实例：
   

   效果：
   

7. range:输入指定范围的输入字段

   这个还是挺好用的，曾经使用这个属性值，写过一个离线播放器，进度条就是基于range来计算的

   实例：
   

   效果：
   

8. tel:验证手机号(只是验证是否是11位数字，并不会验证是否是真的手机号，而且只在触屏网页中有效，点击输入框会弹出数字键)

   这个因为设备有限，展示就没有效果可以展示，请原谅，我会尽快补上的

整理到现在,嗯,12:30,要睡觉了,大概就新增了这么多，如有没有记录到的，欢迎留言。

本文纯手打，有不当之处请留言！如果对小伙伴们有帮助的话,点赞啊,谢谢!