定...">
美文网首页我们就爱程序媛
input标签的type属性及兼容性

input标签的type属性及兼容性

作者: 雨鱼鱼儿 | 来源:发表于2017-07-26 10:31 被阅读0次

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

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

    相关文章

      网友评论

        本文标题:input标签的type属性及兼容性

        本文链接:https://www.haomeiwen.com/subject/xcenkxtx.html