HTML5每日一练之input新增加的5种其他类型1种标签应用

今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color

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



1、number类型:

  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:表示此输入框的默认值


立即运行:

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



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,默认的取值范围为0-100。
min:此输入框的最小值
max:此输入框的最大值
step:当点击上下箭头数值一次跳几个
value:表示此输入框的默认值


立即运行:

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



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;}
复制代码

立即运行:

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



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属性来制定输入的内容,一般为正则表达式。

立即运行:

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



5、color类型:

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

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

立即运行:

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com



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类型的input元素用来定义不同类型的输出,比如计算结果或者脚本的输出,output元素必须属于某个表单。换句话说,必须将它书写在表单内部,或者对他添加form指向属性。

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

立即运行:

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!

HTML5每日一练之input新增加的5种其他类型1种标签应用,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。