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

xman

　今天介绍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]