跟KingDZ学HTML5之九 HTML5新的 Input 种类

标签：tab   上下   title   html   完整   border   sea   滑动条   数字   

好了，我们这节课讲解的可能有些难以测试，因为目前很多浏览器都不支持，这些新增加的标签，我也只能，尽可能的去找支持的浏览器给大家测试展示效果。

HTML5中新增加了很多  Input 的种类。

1.<input type="search">    查询文本框

2.<input type="number"> 数字文本框

3.<input type="range">     滑动条 

4.<input type="color">      颜色文本框

5.<input type="tel">           电话号码文本框

6.<input type="url">           网站文本框

7.<input type="email">     电子邮箱文本框

     下面这几个都是时间的选择器。 
8.<input type="date">     选取日、月、年

9.<input type="month"> 选取月、年

10.<input type="week"> 选取周和年

11.<input type="time">  选取时间（小时和分钟）

12.<input type="datetime"> 选取时间、日、月、年（UTC 时间）

13.<input type="datetime-local">选取时间、日、月、年（本地时间）

好了，大家先简单的看一下，一会给大家演示每一个的效果，大家就应该熟悉了

哦，对了，先给大家展示一个目前浏览器对这些  input  的支持情况

大家惊讶了吧，竟然支持率这么低。我也无奈了。

好了，给大家每个都简单的介绍一下吧。

1>Search

Search类型的input元素是一种专门用来输入搜索关键词的文本框的文本框

 <input type="search" list="searchlist" autocomplete="on" />
 <datalist id="searchlist">
                 <option value="http://www.cnblogs.com" label="博客园" />
                 <option value="http://www.cnblogs.com/hihell" label="kingDZ" />
                
 </datalist>

简单的例子，效果图

好了，介绍几个，咱们以前没见到过的属性。

list="searchlist" 

这个 list 你可以理解成 数据源，然后下面声明一个 datalist 即可  记住  ID 一定要等于 searchlist 啊 。

autocomplete="on"

自动补充完整，你自已可以测试一下 ，他有两个值  on/off

autofocus = "autofocus" or ""

这个代表着 焦点落在  这个标签上。

required = "required" or ""

是否为必填项。

placeholder  提示信息  写上之后

placeholder = “请选择网址”

2>number

这个就比较简单了，就是显示选择数字的

可以看到，比正常的文本框，多了一个上下选择器。

<input type="number" max="9" min="0" step="any"/>

max最大值，min最小值 step 每按一下箭头 ，数字增加或者减小的 数目 ，any 代表不设置。

3>range

准确的说这个应该不叫滚动条，呵呵。

  <input type="range" max="9" min="0" step="2" />

4>color

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

  <input type="color" value="#ff00ff"/>

后面的那个 value 是一个默认颜色，目前只支持16进制的颜色。

好了，这节课就介绍这几个吧，下节课在介绍剩下的。

跟KingDZ学HTML5之九 HTML5新的 Input 种类

标签：tab   上下   title   html   完整   border   sea   滑动条   数字   

原文地址：http://www.cnblogs.com/zhaolizhe/p/6923524.html