频道栏目
读书频道 > 移动开发 > 其他综合 > 新手学HTML5移动开发:面向iOS和Android平台
2.3.2 表单输入类型
2012-08-22 17:24:02     我来说两句
收藏   我要投稿
为您讲解了如何使用 HTML5和CSS3等最新的技术在苹果公司iOS和谷歌公司Android设备上开发Web和独立 应用程序。本书假定您之前并无这方面的编程知识,因此会介绍这两种技术(HTML5和 CSS3)的基本原理,以及JavaS...  立即去当当网订购
多年来,Web开发人员发现HTML4.01支持的选择类型较为简单,而网站需要更多 类型的输入框。事实上,现在HTML5拥有16种新的不同类型的输入框。
这些新的输入类型在用户输入上提供轻量级控制以及内置验证。唯一不足是除了 Opera浏览器,这些新的输入类型还没有被大多数浏览器支持。但仍然可以在不支持这 些输入类型的浏览器上使用所有这些新的输入类型,因为如果浏览器不支持,这些输入 类型将会恢复为浏览器支持的普通文本域。
当然,这意味着您还不能依赖这些浏览器(除了Opera)进行验证,但是如果您使用 这些类型,那么随着时间的推移其他浏览器发展变化并且最终支持这些输入类型,那么 您的表单将会自动变得更容易被大多数用户接受。
当使用其中任何一种输入类型时,必须使用以下的HTML5文档类型来确保证这些 输入类型能正常运行:
 

 <!DOCTYPEHTML>
 

提示
苹果公司的iOS设备能够部分识别这些输入类型,这表现在它们会相 应地改变呈现给您的键盘类型。例如,email输入类型能够确保在主字符 集中包括一个“@”符号,number类型能够确保数字键可见,tel类型将会 显示电话键盘。目前还没有其他方面的发展。我所接触的Android设备都 没有提供这种额外的输入帮助。

 
1.color输入类型
 
该输入类型最终将会调用一个取色器,可以在其中简单地单击选择颜色,但是现在有 一些限制,即必须输入颜色名并且只能在Chrome浏览器中使用。使用方式如下:
 

 Enteryour preferred color <input type='color' name='favcolor' />
 
2.date 和time 输入类型
 
日期、时间选择器与颜色选择器非常相似,单击之后将会弹出一个日历,可以从中 选择一个日期或时间。
目前,date和time输入类型只能在Opera和Chrome上工作,但在Chrome上的运行还 有些问题,默认情况下总是选择1582年(如图2-5所示),必须重新输入一个日期——这是 一个让人非常讨厌的问题,因为:
 


 
图2-5    Google Chrome中的日期选择器仍然存在瑕疵
 
●      在浏览器中使用当前时间设置时间和日期很常见,为什么不这样做呢?
●      除非在Web服务器上或者用JavaScript创建输入栏,否则将无法设置当前日期,必 须输入一个默认的开始日期,并且该日期不会随着时间的推移发生改变。
此外,Chrome浏览器不会弹出任何类型的选择器,可以单击向上和向下图标(或者 按下UP和DOWN按键)来改变当前选择。
另一方面,Opera总是会弹出一个选择日历,如图2-6所示。 如果使用除时间选择器以外的其他选择器,将会遇到一个问题,因为虽然默认情况
下Opera能够正常工作,Chrome会要求在value字段中输入一个类似2012-06-07的日期, 否则将会显示过去几百年前的某个日期。然而,如果输入了这样的日期,Opera就会使 用该日期而不是当前日期作为它的起始值。
所以我建议不要使用日期、时间选择器特性,除非它们已成熟并且能在所有主流浏 览器上正常工作;在此期间可以通过搜索引擎找到大量的JavaScript日期选择器。

提示
图2-5和图2-6中使用的HTML示例文件在dateandtime.htm中,该文件 存储于examples.zip中,可以从网站html5formobiles.com上进行下载。
 


 
图2-6    Opera充分利用了日期选择器
 
日期输入类型  该输入类型选择一个日期,使用方式如下:
 

 <inputtype='date' name='thedate'/>
 
返回值的格式为YYYY-MM-DD。如果希望确保其能够在Chrome上正常工作,那 么需要使用如下HTML(虽然Opera还是使用起始日期作为默认日期):
 

 <inputtype='date' name='thedate' value='2012-03-17' />
月份输入类型  该输入类型选择某个月份,使用方式如下:
 

 <inputtype='month' name='themonth'/>
 
返回值的格式为YYYY-MM。除非该输入类型已经固定,否则需要为Chrome设置 输入value属性来保证其正常工作。
时间输入类型该输入类型返回一个24H格式(HH:MM)的时间,使用方式如下:
 

 <inputtype='time' name='thetime'/>
 
周输入类型  该输入类型返回格式为YYYY-WNN的星期(如2011-W06)。使用方 式如下:
 

 <inputtype='week' name='theweek'/>
 
除非该输入类型已经固定,否则需要为Chrome设置输入value来保证其正常工作。

日期时间输入类型  该输入类型返回UTC(CoordinatedUniversalTime,协调世界时) 的日期和时间,UTC几乎与格林威治标准时间相同,相差不会超过一秒。返回值的格式 为YYYY-MM-DDTHH:MMZ(如2011-10-15T15:35Z)。使用方式如下:
 

 <inputtype='datetime' name='dateandtime'/>
 
除非该输入类型已经固定,否则需要为Chrome设置输入value来保证其正常工作。
本地日期时间输入类型  该输入类型返回用户的本地日期和时间。返回值的格式为
YYYY- MM- DDTHH:MM(如2011-10-15T15:35)。使用方式如下:
 

 <inputtype='datetime-local' name='localdateandtime'/>
 
除非该输入类型已经固定,否则需要为Chrome设置输入value来保证其正常工作。
3.email 输入类型
 
目前仅Chrome和Opera支持该验证类型,只能输入有效的电子邮件地址。使用方式 如下:
 

 <inputtype='email' name='emailaddress' />
 
4.number 输入类型
目前仅Chrome和Opera支持该验证类型,只能输入数字。使用方式如下:
 

 <inputtype='number' name='age'/>
 
在以上两种浏览器上,可以单击输入框旁边的向上、向下箭头或者使用UP、
DOWN按键改变默认值。
5.range 输入类型
 
该输入类型可以显示一个范围构件,该构件具有确定的开始值和步长值,可以在最 小值和最大值之间滑动选择任意值,如图2-7所示。
 




 
图2-7    在Safari上创建一个范围构件


 
最新版本的Opera、Chrome和Safari都支持该输入类型,使用方式如下:
 

 <inputtype='range' name='num' min='0' max='255' value='128' step='1'/>
在其他浏览器上将会显示一个普通的文本输入栏,用户可以直接键入一个数字。
 
6.search 输入类型
 
通过指定搜索类型,浏览器可以调整输入框来提供许多特性如搜索建议(类似于 Google Search)、清除字段内容的图标,以及可能的样式变化用来提醒您的输入类型。然 而,目前仅Safari和Chrome支持该输入类型,唯一改进的是一个用来清除输入的“×” 图标以及圆角的输入域(仅限于OS X Safari)。但是现在使用该输入类型也没有坏处,其 他浏览器只会简单地显示一个文本字段,当未来大多数浏览器支持该特性时您的网页将 会受益于此。
该属性的使用方式如下:
 

 <inputtype='search' name='searchphrase' />
 
7.tel输入类型
 
tel输入类型通知浏览器希望获得一个电话 号码,目前仅iOS设备使用该输入类型。当该输 入类型的区域被选中时,在键盘的位置上会弹 出一个电话数字键盘,如图2-8所示,使用方法 如下:
 


 Telephone<br  />  <input  type='tel' name='phone' />
 
 

8.url输入类型
 
与tel输入类型相似,该输入类型告诉浏览 器希望得到的数据类型。在iPhone和其他iOS 设备上,该输入类型确保显示“.”、“/”和 “.com”按钮。
其他浏览器将来可能会对此输入类型进行 改进,创建该输入类型的HTML如下所示:
 

 <inputtype='url' name='webpage' />
 
 


图2-8    在iPhone的tel输入类型中键入数据
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:2.3.1 表单属性
下一篇:2.4 本地存储
相关文章
图文推荐
排行
热门
最新书评
特别推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站