HTML5移动开发中的input输入框类型

HTML5规范引入了许多新的input输入框类型

在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单

本文中,实测手机为肾4S与米4

数字类型number

定义input类型为type="number"时,iOS显示数字、标点及符号键盘,Android显示拨号键盘。代码如下所示

1

 

<input type="number" id="number" name="number" />

 

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型

HTML5移动开发中的input输入框类型

电话号码类型tel

定义input类型为type="tel"时,iOS与Android都显示拨号键盘。代码如下所示

1

 

<input type="tel" id="tel" name="tel" />

 

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型

HTML5移动开发中的input输入框类型

电子邮件类型email

定义input类型为type="email"时,iOS与Android都显示字母及电子邮件符号键盘。代码如下所示

1

 

<input type="email" id="email" name="email" />

 

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型

HTML5移动开发中的input输入框类型

链接类型url

定义input类型为type="url"时,iOS与Android都显示字母及链接符号键盘。代码如下所示

1

 

<input type="url" id="url" name="url" />

 

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型

HTML5移动开发中的input输入框类型

日期类型date

定义input类型为type="date"时,iOS与Android都显示日期拾取器,风格差异很大。代码如下所示

1

 

<input type="date" id="date" name="date" />

 

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型

HTML5移动开发中的input输入框类型

时间类型time

定义input类型为type="time"时,iOS与Android都显示时间拾取器,风格差异很大。代码如下所示

1

 

<input type="time" id="time" name="time" />

 

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型

HTML5移动开发中的input输入框类型

日期时间类型datetime

定义input类型为type="datetime"时,iOS调用失败,Android依次显示日期时间拾取器。代码如下所示

1

 

<input type="datetime" id="datetime" name="datetime" />

 

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型

HTML5移动开发中的input输入框类型

HTML5移动开发中的input输入框类型

月份类型month

定义input类型为type="month"时,iOS显示月份拾取器,Android显示日期拾取器但是只记录年份与月份。代码如下所示

1

 

<input type="month" id="month" name="month" />

 

附图:左图iOS右图Android

HTML5移动开发中的input输入框类型

HTML5移动开发中的input输入框类型

iOS键盘布局基本一致,Android不同手机键盘布局会有不小的出入

HTML5新增的标签和废除的标签 

40 个重要的 HTML5 面试题及答案   

HTML5与CSS3基础教程(第8版)中文高清版 PDF 

HTML5 地理位置定位(HTML5 Geolocation)原理及应用  

HTML5移动开发即学即用(双色) PDF+源码  

HTML5入门学习笔记  

HTML5移动Web开发笔记  

HTML5 开发中的本地存储的安全风险  

《HTML5与CSS3权威指南》及相配套源码  

关于 HTML5 令人激动的 10 项预测  

HTML5与CSS3实战指南 PDF  

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/af533687505358b1fd309dc0ca144292.html