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

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

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  的支持情况

input 种类 IE FF Opero Chrome
search 不支持 不支持 不支持 不支持
number 不支持 不支持 9.0以上 不支持
range 不支持 不支持 9.0以上 4.0以上
color 不支持 不支持 不支持 不支持
tel 不支持 不支持 9.0以上 不支持
url 不支持 不支持 9.0以上 不支持
email 不支持 不支持 9.0以上 不支持
时间 不支持 不支持 9.0以上 不支持

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

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

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进制的颜色。

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

时间: 2024-12-18 08:35:04

跟KingDZ学HTML5之九 HTML5新的 Input 种类的相关文章

《Javascript权威指南》学习笔记之十九--HTML5 DOM新标准---处理文档元信息和管理交互能力

一.了解DOM 1.DOM是Document Object Model的缩写,即文档对象类型,是文档在内存中的表示形式,是一个应用程序接口,定义了文档的逻辑结构以及一套访问和处理文档的方法. 2.HTML DOM与Core DOM的区别:前者提供了大量的方法和属性,与现有的程序模型一致,更便于脚本的编写者控制. 二.document对象 使用window.document属性返回一个document对象,代表当前window内加载的文档.window可以省略.winName.document返回

跟KingDZ学HTML5之八 HTML5之Web Save

好了,今天有事崭新的一天啊,经过前面几个课程的学习,我想大伙应该差不多已经可以写一些HTML5的应用了,Canvas 的用途太多了,我以后和大家慢慢的谈论,呵呵 弄不好,开个专题,也可以.(*^__^*) 嘻嘻--.好了开始我们今天的课程吧. 大家都应该知道 Cookies 这个东东哦,但是太郁闷了,他只有 4K  ?  真的啊,呵呵,要是工资底薪还可以..哈哈 这节课,俺说的这个和COOKIES 差不多.好了,废话不多说,我们讲课. HTML5 提供了两种在客户端存储数据的新方法: local

HTML5的表单新属性(扩展)

新的 form 属性: autocomplete. novalidate  autocomplete控件是指用户在文本框输入前几个字母或是汉字的时候, autocomplete控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便. autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers,

HTML5基本特性和新功能

HTML5的基本特征 1.向前兼容性 核心理念——平滑过渡! 不支持html5的浏览器可以向前兼容,并不会影响web内容的显示! 2.跨平台运行性 从pc浏览器到手机.平板电脑,甚至是智能电视. 只要用户的设备支持HTML5,基于HTML5的web程序就可以无障碍的运行! 3.简单易用性 相对HTML4.01,HTML5更加简单实用. 没有XHTML2.0那样严格的语法规则. (<HTML5的属性精简表示方法可以大大提高html文本的传输效率!> <HTML5 Web Form提供一套强

HTML5的表单新特性

HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程.在我看来,HTML5 主要在以下几个方面对目前的Web表单做了改进: 新的控件类型 还在为类型检查犯愁吗,还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗,HTML5提供的一系列新的控件将天然的具备类型检查的功能.比如说URL输入框,Email输入框等. <input type="url">

【HTML5】如何处理HTML5新标签的浏览器兼容版问题

HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在低级浏览器中也得到有限的支持,不至于影响整个的页面功能. 让浏览器识别HTML5规范中的新标签 IE8浏览器中还没有添加对HTML5新标签的支持,所以在IE8中无法直接展现HTML5新标签中的内容.庆幸的是IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以

19、HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证 本章全面介绍这些新的输入类型: color date datetime datetime-local email month number range search tel time url week color color 类型用在input字段主要用于选取颜色 从拾色器中选择一个颜色: <form action="demo-form.php"> 选择你喜欢的颜色: <input type=

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: color date datetime datetime-local email month number range search tel time url week 注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. Input 类型: color color 类型用在input字段主要用于选

【HTML5学习】HTML5学习整理笔记(二)

接上一篇 (六):HTML5样式,链接和表格 ①:HTML样式: 1.标签: <style>:样式定义 <link>:资源引用 2.熟悉: rel="stylesheet":外部样式表 type="text/css":引用文档的类型 margin-left:边距 HTML三种样式插入方法: 1.外部样式表: <link rel="stylesheet" type="text/css" href=&