在移动环境下设计和开发优秀的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 841这篇文章是对以往发表在Smashing Magazine上关于 ... -
投身移动开发必须知道的20件事
2012-03-01 23:42 758移动开发需要具体的设计考虑。这个所指的范围非常广,可以从“ ... -
聘用NodeJS开发者的六个建议
2012-03-01 23:41 851假设你正想聘用一名Node ... -
[摘要]Vision Mobile发布2012跨平台开发工具报告 PhoneGap最受欢迎
2012-03-01 23:41 908国外知名调查分析机构V ... -
Facebook发力Mobile Web 推出支付和测试工具
2012-02-28 23:49 822Facebook入场了,在MWC大 ... -
【数据】《移动优先》作者:为什么移动如此重要?
2012-02-28 23:48 943三 年前,前雅虎用户体验总监Luke Wrobl ... -
重新审视Mobile Web
2012-02-28 23:48 702作者简介:Byron是一个 ... -
WebAppTrend周刊:Google Chrome工程师推出Web App开发指南
2012-02-26 00:52 1223从本周起,WebAppTrend将精选一周内(2月20日~2月 ... -
Google Web App开发指南第四章:构建优秀的Web Apps
2012-02-24 23:13 1280构建漂亮的应用 一个web app 的视觉设计不仅 ... -
零基础学习Sencha Touch(资料和教程集合)
2012-02-23 00:41 1288译者注:本篇文章为开发者提供了零基础使用Sencha To ... -
Google Web Apps开发指南之项目样例(上)
2012-02-23 00:41 936如果缺少项目案例部 ... -
如何一步一步制作出高品质Infographic?
2012-02-20 21:23 980译者注:Infographic就 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:10 881在计算机的发展过程中 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:09 0在计算机的发展过程中 ... -
新手必读:PhoneGap入门六大问题
2012-02-18 00:08 1031很多PhoneGap新手总是需要一些基础问题的解答,Ado ... -
Google Web App开发指南第一章:什么是Web Apps?
2012-02-18 00:07 929很多人向我问起学习HTML5技术的权威入门资料,我总是毫不 ... -
Lanyrd是如何应用HTML5创建出优秀的移动Web应用的
2012-02-15 00:28 650当很多人都在等待观望 ... -
Appcelerator收购Cocoafish,旨在为Titanium平台提供即时移动云服务
2012-02-15 00:17 918译者注:Appcelerator是 ... -
Android官方文档之Web Apps最佳实践
2012-02-15 00:14 686为移动设备开发web页面或者web应用与为桌面浏览器开发web ... -
Android官方文档之Web Apps调试
2012-02-15 00:13 912概览 你可以使用控制台的Javascript方法调试你的w ...
相关推荐
在本篇关于“Web基础——WebApp之初体验(三)”的文章中,我们将深入探讨Web应用程序(WebApp)的关键概念和技术,以及它们如何为用户提供便捷的在线体验。WebApp是互联网技术的重要组成部分,它们允许用户在浏览器...
很棒的python3-webapp Python入门教程实战篇:网站+ iOS App源码项目结构awesome-python3-webapp/ <-- 根目录|+- backup/ <-- 备份目录|+- conf/ <-- 配置文件|+- dist/ <-- 打包目录|+- ...
项目名称 camunda BPM - webapp - webjar 项目主页 隶属组织 开源协议 仓库 Central 类库 camunda BPM - webapp - webjar 标签 javabpmnworkflowdmnbpmprocess-enginecamunda-bpm-platformcamunda-enginecmmn
教育移动WebApp开发实践.ppt
5. **安全性**:Webapp1需要考虑的安全问题包括数据加密、防止SQL注入、XSS攻击、CSRF攻击等,这通常需要开发者在编程时遵循安全最佳实践,并使用像HTTPS这样的安全协议。 6. **用户体验**:Webapp1的成功很大程度...
Webapp 设计与实践:必胜宅急送背后的思考 Webapp 设计与实践:必胜宅急送背后的思考.pdf 文件提供了深入浅出的见解,讲述了餐饮业在移动消费趋势下的 O2O 模式实践, Web app 设计的重要性及其在 O2O 双向流程中的...
本篇文章将深入探讨Android WebApp开发的各个方面,旨在为开发者提供一个全面的理解和实践指导。 一、WebApp概述 WebApp是一种基于Web技术构建的应用程序,用户可以在浏览器中直接访问和使用,而无需安装。对于...
"Webapp页面交互与布局"是构建高效、用户友好的WebApp的核心要素,对于提升用户体验至关重要。 页面交互主要关注用户与网页的互动方式,包括点击、滑动、拖放、动画效果、表单填写、验证等。良好的交互设计能够使...
通过以上这些知识点的学习和实践,开发者能够构建功能丰富、用户体验良好的Web应用程序。"webApp1:webApp"这个项目可能就是对这些技术的实际应用,通过解压webApp1-master文件,可以进一步研究源代码和项目结构,...
具体到宽度,开发者应当根据WebApp内容进行调整,最佳体验宽度为一屏大小,并且建议最大不超过1000像素。高度方面,则需避免频繁变化,以维持用户界面的稳定性。 二、API规范 API是应用程序编程接口的简称,是软件...
在WebApp开发中,合理使用`<link>`标签可以显著提升用户体验,特别是在图标、启动画面和不同屏幕方向下的样式设定上。 - **apple-touch-startup-image**:定义WebApp启动时的默认图片,增强应用的视觉效果。 - **...
通过深入学习和实践QtWebApp提供的示例,开发者不仅可以掌握Web应用开发的基本技巧,还能进一步提升C++和Qt框架的使用能力。无论你是希望创建简单的数据交互应用,还是复杂的后台服务,QtWebApp都是一个值得考虑的...
总的来说,刘炬光在w3ctech沙龙上的分享,揭示了千万级吞吐量WebApp在设计、监控和优化方面的最佳实践。通过实时错误监控、性能监控和优化,以及强大的技术架构支持,QQ查找业务能够成功应对高流量挑战,为用户提供...
首先,确保你已经安装了Qt开发环境,并且包含了QtWebApp模块。如果没有,你需要通过Qt Creator的在线包管理器或者手动下载安装。QtWebApp通常不包含在默认的Qt安装中,所以你可能需要额外下载并添加到项目中。 1. *...
training/webapp镜像,方面一些内网用户无法直接pull镜像时下载: 使用方法: docker load -i training-webapp.tar.gz
idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发...
iPhone WebApp是基于Web技术构建的应用程序,它们可以在iPhone或iPad的Safari浏览器中运行,并可以选择添加到主屏幕,以无边框、全屏模式呈现,提供类似原生应用的用户体验。WebApp的优点在于开发速度快,更新灵活,...
"SmartAdmin - Responsive WebApp 4.5.1" 是一款高级且功能丰富的响应式Web应用程序模板,专为开发高效、现代和用户友好的管理界面而设计。该模板以其灵活性和适应性著称,能够自动调整布局以适应各种设备,包括桌面...
在移动互联网高度发达的今天,为了满足用户在不同设备上便捷地体验游戏活动,【游戏活动h5自适应手机】成为了一个重要的设计标准。这种H5(HTML5)网页应用能够自动适配不同尺寸的手机屏幕,确保用户在手机上也能...