HTML5表单教程之input新增加的5种其他类型1种标签

HTML5表单教程之input新增加的5种其他类型1种标签

1、number类型：

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

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

min：此输入框的最小值

max：此输入框的最大值

step：当点击上下箭头数值一次跳几个

value：表示此输入框的默认值

2、range类型：

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

此输入框是一种只允许输入某一段范围内数值的文本框，它同样也具有四个属性，分别是：min、max、step和value，默认的取值范围为0-100。

min：此输入框的最小值

max：此输入框的最大值

step：当点击上下箭头数值一次跳几个

value：表示此输入框的默认值

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;} 

4、tel类型：

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

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

5、color类型：

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

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

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

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

本文原地址： http://www.sitejs.cn/sitejs-12728-1.html