开发者俱乐部

标题: [HTML5] input新增加的5种其他类型1种标签应用 [打印本页]

作者: xman    时间: 2016-3-15 21:47
标题: [HTML5] input新增加的5种其他类型1种标签应用
 今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color

     注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好,外观取决于浏览器

     1、number类型:

    注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好,外观取决于浏览器






     此输入框是一种专门用来输入数字的文本框,并且在提交的时候会验证内容是否为数字,它具有四个属性,分别是:min、max、step和value。

     min:此输入框的最小值
     max:此输入框的最大值
     step:当点击上下箭头数值一次跳几个
     value:表示此输入框的默认值

     立即运行:





    2、range类型:





     min:此输入框的最小值
     max:此输入框的最大值
     step:当点击上下箭头数值一次跳几个
     value:表示此输入框的默认值

     立即运行:





    3、search类型:





     search类型的input元素是一种专门用来输入搜索关键词的文本框,search类型与text类型仅在外观上有区别,外观可以使用CSS来定义。





     立即运行:





     4、tel类型:





     tel元素被设计用来输入电话号码的专用文本框,他没有特殊的验证规则,不强制输入数字,因为很多电话通常带有其它的字符,比如:010-88696811,但是开发者可以pattern属性来制定输入的内容,一般为正则表达式。

     立即运行:




     5、color类型:





     color类型的input元素用来取色,它提供了一个颜色的取色器。

     立即运行:





     6、output标签:





     在这个例子中,元素绑定到了一个range元素上,当拖动range元素的滑动杆的时候,值就会显示出来。
目前大部分浏览器对其支持的还不是十分理想!

     立即运行:




[color=rgb(51, 102, 153) !important]








欢迎光临 开发者俱乐部 (http://xodn.com/) Powered by Discuz! X3.2