在HTML5移动开发中，通过这些新的输入框类型来显示定制后的键盘布局，用户体验更好，更容易填写各种表单
本文中，实测手机为肾4S与米4
数字类型number定义input类型为type="number"时，iOS显示数字、标点及符号键盘，Android显示拨号键盘。代码如下所示
1
<input type="number" id="number" name="number" />
附图：左图iOS右图Android
电话号码类型tel
定义input类型为type="tel"时，iOS与Android都显示拨号键盘。代码如下所示
1
<input type="tel" id="tel" name="tel" />
附图：左图iOS右图Android
电子邮件类型email
定义input类型为type="email"时，iOS与Android都显示字母及电子邮件符号键盘。代码如下所示
1
<input type="email" id="email" name="email" />
附图：左图iOS右图Android
链接类型url
定义input类型为type="url"时，iOS与Android都显示字母及链接符号键盘。代码如下所示
1
<input type="url" id="url" name="url" />
附图：左图iOS右图Android
日期类型date
定义input类型为type="date"时，iOS与Android都显示日期拾取器，风格差异很大。代码如下所示
1
<input type="date" id="date" name="date" />
附图：左图iOS右图Android
时间类型time
定义input类型为type="time"时，iOS与Android都显示时间拾取器，风格差异很大。代码如下所示
1
<input type="time" id="time" name="time" />
附图：左图iOS右图Android
日期时间类型datetime
定义input类型为type="datetime"时，iOS调用失败，Android依次显示日期时间拾取器。代码如下所示
1
<input type="datetime" id="datetime" name="datetime" />
附图：左图iOS右图Android
月份类型month
定义input类型为type="month"时，iOS显示月份拾取器，Android显示日期拾取器但是只记录年份与月份。代码如下所示
1
<input type="month" id="month" name="month" />
附图：左图iOS右图Android
iOS键盘布局基本一致，Android不同手机键盘布局会有不小的出入
HTML5新增的标签和废除的标签 http://www.linuxidc.com/Linux/2016-01/127516.htm
40 个重要的 HTML5 面试题及答案 http://www.linuxidc.com/Linux/2015-12/126824.htm
HTML5与CSS3基础教程（第8版）中文高清版 PDF http://www.linuxidc.com/Linux/2015-12/125734.htm
HTML5 地理位置定位(HTML5 Geolocation)原理及应用 http://www.linuxidc.com/Linux/2012-07/65129.htm
HTML5移动开发即学即用(双色) PDF+源码 http://www.linuxidc.com/Linux/2013-09/90351.htm
HTML5入门学习笔记 http://www.linuxidc.com/Linux/2013-09/90089.htm
HTML5移动Web开发笔记 http://www.linuxidc.com/Linux/2013-09/90088.htm
HTML5 开发中的本地存储的安全风险 http://www.linuxidc.com/Linux/2013-06/86486.htm
《HTML5与CSS3权威指南》及相配套源码 http://www.linuxidc.com/Linux/2013-02/79950.htm
关于 HTML5 令人激动的 10 项预测 http://www.linuxidc.com/Linux/2013-02/79917.htm
HTML5与CSS3实战指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm
本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-03/128944.htm
