input标签的type属性及兼容性

input标签type的值有很多，今天就来给大家总结一下

1. < input type ="button"> 定义可点击按钮 （这个不用我多说，做前端应该都知道)

2.< input type ="checkbox"> 定义复选框，允许用户选择中选取一个或多个选项。

3.< input type ="file"> 用于输入字段和 "浏览"按钮，文件上传。不过这个在ie下有个兼容性问题，不能上传文件，其实这个是IE的安全限制问题，就是在ie下必须点击file的浏览按钮才能上传文件，既然IE非得要亲自点击，我们可以改变思路，解决的思路就是：我们可以让< input type ="file">设置成绝对定位，位于某个标签之上，这样就可以啦，如果你想改变我们肉眼看到的样式，你可以把< input type ="file">设置成透明的，然后去改变下面标签的样式就ok啦。

4.< input type ="hidden">用于定义隐藏的字段，这个很important，通常如果你想给不想让用户看见又能前后端交互，这个就很方便了，其实在实际操作中< input type ="text"> css样式设为display：none，也可以实现在各种效果，本人目前还不知道他俩有啥区别

5.< input type ="image" src="图片路径" alt="">用于定义图像形式的提交按钮

6.< input type ="password">定义密码字段。

7.< input type ="radio">定义单选按钮。允许用户选取给定数目的选择中的一个选项，例如，让用户选择性别的时候用到。

8.< input type ="reset">定义重置按钮。重置按钮会清除表单中的所有数据。

9.< input type ="submit">定义提交按钮。提交按钮会把表单数据发送到服务器。

10.< input type ="text">定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

11.< input type ="number"> 定义用户只能输入数字，这个用在移动端当用户触发了这个input之后，弹出的小键盘直接数字，特别方便

12.< input type ="tel"> 定义用于电话号码的文本字段

13.< input type ="email"> 定义邮件的文本字段

14.< input type ="range"> 定义带有 slider 控件的数字字段

15.< input type ="time"> 定义日期字段的时、分、秒

16.< input type ="search"> 定义用于搜索的文本字段

17.< input type ="url"> 定义用于 URL 的文本字段

18.< input type ="week"> 定义日期字段的周

19.< input type ="month">定义日期字段的月

20.< input type ="datetime-local">定义日期字段

21.< input type ="datetime">定义日期字段

22.< input type ="date">定义日期字段

23.< input type ="color">定义拾色器

转载于:https://www.cnblogs.com/xiaoyuyang/p/7390709.html