在移动环境下设计和开发优秀的forms是一件非常有挑战性的事。在一流的浏览器中,forms能够模仿桌面版本的风格,但是对于其他的浏览器,forms往往无法达到他们期望的样子。但是一个更大的挑战是,对用户而言,forms通常很难控制,内容添加也很麻烦。所以头号规则就是:在移动环境中,要限定使用的forms。
自由文本输入控件
虽然在forms不可避免地需要用户输入信息,尽量避免使用文本框和文本区域。对于用户来说,在文本框或是文本区域这些自由文本输入控件中输入内容是一件相当麻烦的事情。取而代之的是,可以使用单选按钮,选择框,甚至是链接列表来减少用户的文本输入。
默认输入模式
可以使用Wireless CSS 或是CSS-MP定义输入掩码或输入模式,这样就能限定输入的数据类型了,因此,用户就可以更加方便地在空闲文本区域中输入信息了。
移动设备键盘的输入模式(字母或是数字)能够根据输入需要自动地切换。下面的例子就是限定只能输入数字:
<input type="text" style=' -wap-input-format: "*N"' />
下面的例子限定输入的首字母必须大写:
<input type="text" style=' -wap-input-format: "A*a"' />
文章来源:Forms
译文来源:http://www.webapptrend.com/
WebAppTrend是一个独立的技术博客,关注Web App前瞻和实践,以及智能浏览器发展
请大家在关注ITeye的同时,关注我们的新浪微博 @WebAppTrend,关注我们的腾讯微博@WebAppTrend,欢迎加入我们的Q Q群:193775364
发表评论
-
响应式Web设计资源整理
2012-03-02 22:50 809这篇文章是对以往发表在Smashing Magazine上关于 ... -
投身移动开发必须知道的20件事
2012-03-01 23:42 722移动开发需要具体的设计考虑。这个所指的范围非常广,可以从“ ... -
聘用NodeJS开发者的六个建议
2012-03-01 23:41 794假设你正想聘用一名Node ... -
[摘要]Vision Mobile发布2012跨平台开发工具报告 PhoneGap最受欢迎
2012-03-01 23:41 874国外知名调查分析机构V ... -
Facebook发力Mobile Web 推出支付和测试工具
2012-02-28 23:49 791Facebook入场了,在MWC大 ... -
【数据】《移动优先》作者:为什么移动如此重要?
2012-02-28 23:48 903三 年前,前雅虎用户体验总监Luke Wrobl ... -
重新审视Mobile Web
2012-02-28 23:48 674作者简介:Byron是一个 ... -
WebAppTrend周刊:Google Chrome工程师推出Web App开发指南
2012-02-26 00:52 1189从本周起,WebAppTrend将精选一周内(2月20日~2月 ... -
Google Web App开发指南第四章:构建优秀的Web Apps
2012-02-24 23:13 1250构建漂亮的应用 一个web app 的视觉设计不仅 ... -
零基础学习Sencha Touch(资料和教程集合)
2012-02-23 00:41 1256译者注:本篇文章为开发者提供了零基础使用Sencha To ... -
Google Web Apps开发指南之项目样例(上)
2012-02-23 00:41 901如果缺少项目案例部 ... -
如何一步一步制作出高品质Infographic?
2012-02-20 21:23 952译者注:Infographic就 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:10 853在计算机的发展过程中 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:09 0在计算机的发展过程中 ... -
新手必读:PhoneGap入门六大问题
2012-02-18 00:08 997很多PhoneGap新手总是需要一些基础问题的解答,Ado ... -
Google Web App开发指南第一章:什么是Web Apps?
2012-02-18 00:07 893很多人向我问起学习HTML5技术的权威入门资料,我总是毫不 ... -
Lanyrd是如何应用HTML5创建出优秀的移动Web应用的
2012-02-15 00:28 624当很多人都在等待观望 ... -
Appcelerator收购Cocoafish,旨在为Titanium平台提供即时移动云服务
2012-02-15 00:17 885译者注:Appcelerator是 ... -
Android官方文档之Web Apps最佳实践
2012-02-15 00:14 649为移动设备开发web页面或者web应用与为桌面浏览器开发web ... -
Android官方文档之Web Apps调试
2012-02-15 00:13 885概览 你可以使用控制台的Javascript方法调试你的w ...
相关推荐
webapp开发的最佳实践与中文总结,非常热门的web app开发必备资料!
很棒的python3-webapp Python入门教程实战篇:网站+ iOS App源码项目结构awesome-python3-webapp/ <-- 根目录|+- backup/ <-- 备份目录|+- conf/ <-- 配置文件|+- dist/ <-- 打包目录|+- ...
Web基础——WebApp之初体验(三)
教育移动WebApp开发实践.ppt
Webapp 设计与实践:必胜宅急送背后的思考 Webapp 设计与实践:必胜宅急送背后的思考.pdf 文件提供了深入浅出的见解,讲述了餐饮业在移动消费趋势下的 O2O 模式实践, Web app 设计的重要性及其在 O2O 双向流程中的...
webapp1 webapp1
training/webapp镜像,方面一些内网用户无法直接pull镜像时下载: 使用方法: docker load -i training-webapp.tar.gz
这是一款用于webApp端的iframe插件demo,css中有部分冗余样式,这是从项目简单拷贝出来的,还有一些demo无关样式并没有删除掉,所以大家使用的时候请自行调整样式即可
C# Webapp C# WebappC# WebappC# WebappC# WebappC# WebappC# Webapp
webApp1:webApp
使用webapp2进行自定义用户身份验证 这是使用webapp2进行用户帐户管理的基本实现。 您将需要注意以下事项: 实施用户注册 编写代码以处理登录 设置电子邮件验证和密码恢复(这已经为您完成了) 通过电子邮件发送...
Maven坐标:org.eclipse.jetty:jetty-webapp:9.3.19.v20170502; 标签:eclipse、jetty、webapp、中文文档、jar包、java; 使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 ...
:shopping_cart: :money_bag: 取件网络应用程序 这是一个名为Pickup App的电子商务演示 ...注册用户列表 与我们联系表格 PS:这是一个未完成的项目 :globe_with_meridians: 您可以在此处访问: : :eyes: 介面
WebApp银行帐户经理 简单的Web应用程序,您可以按用户或管理员角色创建和控制财务帐户。 二手技术: JDK 10 Apache Tomcat 9 Spring5:Spring MVC,Spring Security MySQL的8 Hibernate5.3.0 玛文 WEB:JSP,...
移动端音乐webapp-Vue高级实战项目 链接:https://pan.baidu.com/s/1tHhhvI9JOhYrcGNrXzJYjA 提取码:cqrz
Qt使用QtWebApp搭建Http服务器实现文件下载
1.了解Web工程概念及与传统软件工程的区别 2.理解WebApp的概念、特点和开发过程 3.掌握WebApp的分析、设计和测试方法 4.掌握WebApp综合开发方法及课程设计过程
WebApp模板提示计算器 现场演示: 工具 代码编辑器:方括号编码语言:HTML5,CSS3,JavaScript
10个主流webapp小程序项目,是个非常好的资源,包括主流的:教育,电商,快递,外卖等;10个主流webapp小程序项目,是个非常好的资源,包括主流的:教育,电商,快递,外卖等;10个主流webapp小程序项目,是个非常好的...
webapp 页面交互与布局webapp 页面交互与布局webapp 页面交互与布局webapp 页面交互与布局