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">定义拾色器


就这么多啦,欢迎大家吐槽。。。。。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,347评论 19 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,654评论 1 41
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,717评论 0 17
  • 【春暖花开】20170411周一学习力践行day25 开口迟寻因;慢!慢!慢下来与例行践行 今天回家非常晚,例行践...
    Sophie2liu阅读 988评论 0 0
  • 信仍未写完 从春苗萌发到树叶落下 院子里的柿子树挂满红灯笼 杏子也成了满树的金黄 莫说寒蝉凄切 只道秋意凉 湿漉漉...
    庄周大叔阅读 1,677评论 0 3