新技术论坛
搜索
查看: 644|回复: 0
打印 上一主题 下一主题

[HTML5] input新增加的5种其他类型1种标签应用

[复制链接]
  • TA的每日心情
    开心
    2016-12-9 18:18
  • 签到天数: 85 天

    连续签到: 1 天

    [LV.6]常住居民II

    扫一扫,手机访问本帖
    楼主
    跳转到指定楼层
    发表于 2016-3-15 21:47:04 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
     今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color

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

         1、number类型:

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

    • <form>
    •       <input id=“w3cfuns_date” name=“w3cfuns.com” type=“number”/>
    •       <input type=“submit” value=“提交”/>
    • </form>





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

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

         立即运行:

    • <form>
    •         <input id=“w3cfuns_number1” name=“w3cfuns.com” type=“number”/>
    •         <input id=“w3cfuns_number2” name=“w3cfuns.com” type=“number” min=“10” max=“100”/>
    •         <input id=“w3cfuns_number3” name=“w3cfuns.com” type=“number” step=“10”/>
    •         <input type=“submit” value=“提交”/>
    • </form>




        2、range类型:

    • <form>
    •       <input id=“w3cfuns_range” name=“w3cfuns.com” type=“range”/>
    •       <input type=“submit” value=“提交”/>
    • </form>




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

         立即运行:

    • <form>
    •         <input id=“w3cfuns_range1” name=“w3cfuns.com” type=“range”/>
    •         <input id=“w3cfuns_range2” name=“w3cfuns.com” type=“range” value=“50”/>
    •         <input id=“w3cfuns_range3” name=“w3cfuns.com” type=“range” step=“10”/>
    •         <input type=“submit” value=“提交”/>
    • </form>




        3、search类型:

    • <form>
    •       <input id=“w3cfuns_search” name=“w3cfuns.com” type=“search”/>
    •       <input type=“submit” value=“提交”/>
    • </form>




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

    • input[type=“search”]{-webkit-appearance:textfield;}




         立即运行:

    • <form>
    •       <input id=“w3cfuns_search” name=“w3cfuns.com” type=“search”/>
    •       <input type=“submit” value=“提交”/>
    • </form>




         4、tel类型:

    • <form>
    •       <input id=“w3cfuns_tel” name=“w3cfuns.com” type=“tel”/>
    •       <input type=“submit” value=“提交”/>
    • </form>




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

         立即运行:
    • <form>
    •       <input id=“w3cfuns_tel” name=“w3cfuns.com” type=“tel”/>
    •       <input type=“submit” value=“提交”/>
    • </form>




         5、color类型:

    • <form>
    •       <input id=“w3cfuns_color” name=“w3cfuns.com” type=“color”/>
    •       <input type=“submit” value=“提交”/>
    • </form>





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

         立即运行:

    • <form>
    •       <input id=“w3cfuns_range” name=“w3cfuns.com” type=“range”/>
    •       <output id=“w3cfuns_output” name=“w3cfuns.com” type=“output” value=“w3cfuns_range.value”>50</output>
    •       <input type=“submit” value=“提交”/>
    • </form>




         6、output标签:

    • <form>
    •       <input id=“w3cfuns_range” name=“w3cfuns.com” type=“range”/>
    •       <output id=“w3cfuns_output” name=“w3cfuns.com” type=“output” value=“w3cfuns_range.value”>50</output>
    •       <input type=“submit” value=“提交”/>
    • </form>




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

         立即运行:

    • <form>
    •       <input id=“w3cfuns_range” name=“w3cfuns.com” type=“range”/>
    •       <output id=“w3cfuns_output” name=“w3cfuns.com” type=“output” value=“w3cfuns_range.value”>50</output>
    •       <input type=“submit” value=“提交”/>
    • </form>




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



    高级模式
    B Color Image Link Quote Code Smilies

    本版积分规则

    手机版|Archiver|开发者俱乐部 ( ICP/ISP证:辽B-2-4-20110106号 IDC证:辽B-1-2-20070003号 )

    GMT+8, 2024-12-23 05:41 , Processed in 0.122978 second(s), 18 queries .

    X+ Open Developer Network (xodn.com)

    © 2009-2017 沈阳讯网网络科技有限公司

    快速回复 返回顶部 返回列表