HTML5移动开发中的input输入框类型
HTML5移动开发中的input输入框类型
HTML5规范引入了许多新的input输入框类型
在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新增的标签和废除的标签
40 个重要的 HTML5 面试题及答案
HTML5与CSS3基础教程(第8版)中文高清版 PDF
HTML5 地理位置定位(HTML5 Geolocation)原理及应用
HTML5移动开发即学即用(双色) PDF+源码
HTML5入门学习笔记
HTML5移动Web开发笔记
HTML5 开发中的本地存储的安全风险
《HTML5与CSS3权威指南》及相配套源码
关于 HTML5 令人激动的 10 项预测
HTML5与CSS3实战指南 PDF
本文永久更新链接地址:
评论暂时关闭