下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922
论坛 >移动开发 >HTML5移动开发中的input输入框类型

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

女神晴姐发布于 2015-10-11 10:25查看:1518回复:3

blob.png

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

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

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


数字类型number

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

1
"number" id="number" name="number" />

附图:左图iOS右图Android

blob.png

电话号码类型tel

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

1
"tel" id="tel" name="tel" />

附图:左图iOS右图Android

blob.png

电子邮件类型email

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

1
"email" id="email" name="email" />

附图:左图iOS右图Android

blob.png

链接类型url

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

1
"url" id="url" name="url" />

附图:左图iOS右图Android

blob.png

日期类型date

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

1
"date" id="date" name="date" />

附图:左图iOS右图Android

blob.png

时间类型time

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

1
"time" id="time" name="time" />

附图:左图iOS右图Android

blob.png

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

共有3条评论

  • 慧星的那一夜
  • MK
  • 药师
  • IT宅男
  • mr jack
  • YUI
  • Mr ken
  • cappuccino
  • 课课家技术团队1
  • 选择版块:

  • 标题:

  • 内容

  • 验证码:

  • 标题:

  • 内容

  • 选择版块:

移动帖子x

移动到: