UDN-企业互联网技术人气社区

板块导航

浏览  : 2646
回复  : 5

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

[复制链接]
友美C_cup的头像 楼主
  今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color

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

     1、number类型:

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


  1. <form>
  2.       <input id=“w3cfuns_date” name=“w3cfuns.com” type=“number”/>
  3.       <input type=“submit” value=“提交”/>
  4. </form>
复制代码


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

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

     立即运行:

  1. <form>
  2.         <input id=“w3cfuns_number1” name=“w3cfuns.com” type=“number”/>
  3.         <input id=“w3cfuns_number2” name=“w3cfuns.com” type=“number” min=“10” max=“100”/>
  4.         <input id=“w3cfuns_number3” name=“w3cfuns.com” type=“number” step=“10”/>
  5.         <input type=“submit” value=“提交”/>
  6. </form>
复制代码

    2、range类型:


  1. <form>
  2.       <input id=“w3cfuns_range” name=“w3cfuns.com” type=“range”/>
  3.       <input type=“submit” value=“提交”/>
  4. </form>
复制代码

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

     立即运行:

  1. <form>
  2.         <input id=“w3cfuns_range1” name=“w3cfuns.com” type=“range”/>
  3.         <input id=“w3cfuns_range2” name=“w3cfuns.com” type=“range” value=“50”/>
  4.         <input id=“w3cfuns_range3” name=“w3cfuns.com” type=“range” step=“10”/>
  5.         <input type=“submit” value=“提交”/>
  6. </form>
复制代码

    3、search类型:


  1. <form>
  2.       <input id=“w3cfuns_search” name=“w3cfuns.com” type=“search”/>
  3.       <input type=“submit” value=“提交”/>
  4. </form>
复制代码

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

  1. input[type=“search”]{-webkit-appearance:textfield;}
复制代码

     立即运行:

  1. <form>
  2.       <input id=“w3cfuns_search” name=“w3cfuns.com” type=“search”/>
  3.       <input type=“submit” value=“提交”/>
  4. </form>
复制代码

     4、tel类型:


  1. <form>
  2.       <input id=“w3cfuns_tel” name=“w3cfuns.com” type=“tel”/>
  3.       <input type=“submit” value=“提交”/>
  4. </form>
复制代码

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

     立即运行:

  1. <form>
  2.       <input id=“w3cfuns_tel” name=“w3cfuns.com” type=“tel”/>
  3.       <input type=“submit” value=“提交”/>
  4. </form>
复制代码

     5、color类型:

  1. <form>
  2.       <input id=“w3cfuns_color” name=“w3cfuns.com” type=“color”/>
  3.       <input type=“submit” value=“提交”/>
  4. </form>
复制代码

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

     立即运行:


  1. <form>
  2.       <input id=“w3cfuns_range” name=“w3cfuns.com” type=“range”/>
  3.       <output id=“w3cfuns_output” name=“w3cfuns.com” type=“output” value=“w3cfuns_range.value”>50</output>
  4.       <input type=“submit” value=“提交”/>
  5. </form>
复制代码

     6、output标签:


  1. <form>
  2.       <input id=“w3cfuns_range” name=“w3cfuns.com” type=“range”/>
  3.       <output id=“w3cfuns_output” name=“w3cfuns.com” type=“output” value=“w3cfuns_range.value”>50</output>
  4.       <input type=“submit” value=“提交”/>
  5. </form>
复制代码

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

     立即运行:

  1. <form>
  2.       <input id=“w3cfuns_range” name=“w3cfuns.com” type=“range”/>
  3.       <output id=“w3cfuns_output” name=“w3cfuns.com” type=“output” value=“w3cfuns_range.value”>50</output>
  4.       <input type=“submit” value=“提交”/>
  5. </form>
复制代码












相关帖子

发表于 2015-8-18 08:19:30 | 显示全部楼层
点评 ( 1 ) 收起 / 展开点评

友美C_cup 2015年08月19日 11:39 详情 回复

感谢

使用道具 举报

回复

友美C_cup的头像 楼主
发表于 2015-8-19 11:39:35 | 显示全部楼层
使用道具 举报

回复

发表于 2016-3-15 09:49:07 | 显示全部楼层
赞一个
使用道具 举报

回复

发表于 2016-3-15 12:51:07 来自手机 | 显示全部楼层
使用道具 举报

回复

发表于 2016-3-15 12:51:13 来自手机 | 显示全部楼层
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部