`
WebAppTrend
  • 浏览: 54865 次
社区版块
存档分类
最新评论

WebApp最佳实践之用户体验篇:Forms

 
阅读更多

 

在移动环境下设计和开发优秀的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基础——WebApp之初体验(三)

    在本篇关于“Web基础——WebApp之初体验(三)”的文章中,我们将深入探讨Web应用程序(WebApp)的关键概念和技术,以及它们如何为用户提供便捷的在线体验。WebApp是互联网技术的重要组成部分,它们允许用户在浏览器...

    awesome-python3-webapp:Python入门教程实战篇:网站+ iOS App

    很棒的python3-webapp Python入门教程实战篇:网站+ iOS App源码项目结构awesome-python3-webapp/ &lt;-- 根目录|+- backup/ &lt;-- 备份目录|+- conf/ &lt;-- 配置文件|+- dist/ &lt;-- 打包目录|+- ...

    camunda-webapp-webjar-7.13.0.jar

    项目名称 camunda BPM - webapp - webjar 项目主页 隶属组织 开源协议 仓库 Central 类库 camunda BPM - webapp - webjar 标签 javabpmnworkflowdmnbpmprocess-enginecamunda-bpm-platformcamunda-enginecmmn

    教育移动WebApp开发实践.ppt

    教育移动WebApp开发实践.ppt

    webapp1:webapp1

    5. **安全性**:Webapp1需要考虑的安全问题包括数据加密、防止SQL注入、XSS攻击、CSRF攻击等,这通常需要开发者在编程时遵循安全最佳实践,并使用像HTTPS这样的安全协议。 6. **用户体验**:Webapp1的成功很大程度...

    Webapp设计与实践:必胜宅急送背后的思考.pdf

    Webapp 设计与实践:必胜宅急送背后的思考 Webapp 设计与实践:必胜宅急送背后的思考.pdf 文件提供了深入浅出的见解,讲述了餐饮业在移动消费趋势下的 O2O 模式实践, Web app 设计的重要性及其在 O2O 双向流程中的...

    Android应用程序之WebApp开发实战

    本篇文章将深入探讨Android WebApp开发的各个方面,旨在为开发者提供一个全面的理解和实践指导。 一、WebApp概述 WebApp是一种基于Web技术构建的应用程序,用户可以在浏览器中直接访问和使用,而无需安装。对于...

    webapp 页面交互与布局

    "Webapp页面交互与布局"是构建高效、用户友好的WebApp的核心要素,对于提升用户体验至关重要。 页面交互主要关注用户与网页的互动方式,包括点击、滑动、拖放、动画效果、表单填写、验证等。良好的交互设计能够使...

    webApp1:webApp

    通过以上这些知识点的学习和实践,开发者能够构建功能丰富、用户体验良好的Web应用程序。"webApp1:webApp"这个项目可能就是对这些技术的实际应用,通过解压webApp1-master文件,可以进一步研究源代码和项目结构,...

    手机WebApp开发者指导规范.pdf

    具体到宽度,开发者应当根据WebApp内容进行调整,最佳体验宽度为一屏大小,并且建议最大不超过1000像素。高度方面,则需避免频繁变化,以维持用户界面的稳定性。 二、API规范 API是应用程序编程接口的简称,是软件...

    webkit webApp 开发技术要点总结

    在WebApp开发中,合理使用`&lt;link&gt;`标签可以显著提升用户体验,特别是在图标、启动画面和不同屏幕方向下的样式设定上。 - **apple-touch-startup-image**:定义WebApp启动时的默认图片,增强应用的视觉效果。 - **...

    QtWebApp应用例程

    通过深入学习和实践QtWebApp提供的示例,开发者不仅可以掌握Web应用开发的基本技巧,还能进一步提升C++和Qt框架的使用能力。无论你是希望创建简单的数据交互应用,还是复杂的后台服务,QtWebApp都是一个值得考虑的...

    刘炬光:千万级吞吐WebApp——QQ查找业务的最佳尝试

    总的来说,刘炬光在w3ctech沙龙上的分享,揭示了千万级吞吐量WebApp在设计、监控和优化方面的最佳实践。通过实时错误监控、性能监控和优化,以及强大的技术架构支持,QQ查找业务能够成功应对高流量挑战,为用户提供...

    Qt使用QtWebApp搭建Http服务器实现文件下载

    首先,确保你已经安装了Qt开发环境,并且包含了QtWebApp模块。如果没有,你需要通过Qt Creator的在线包管理器或者手动下载安装。QtWebApp通常不包含在默认的Qt安装中,所以你可能需要额外下载并添加到项目中。 1. *...

    training/webapp镜像

    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开发webapp 热部署idea开发...

    iPhone WebApp 开发指南

    iPhone WebApp是基于Web技术构建的应用程序,它们可以在iPhone或iPad的Safari浏览器中运行,并可以选择添加到主屏幕,以无边框、全屏模式呈现,提供类似原生应用的用户体验。WebApp的优点在于开发速度快,更新灵活,...

    SmartAdmin - Responsive WebApp_4.5.1

    "SmartAdmin - Responsive WebApp 4.5.1" 是一款高级且功能丰富的响应式Web应用程序模板,专为开发高效、现代和用户友好的管理界面而设计。该模板以其灵活性和适应性著称,能够自动调整布局以适应各种设备,包括桌面...

    webapp_游戏活动webapp_游戏活动h5自适应手机_

    在移动互联网高度发达的今天,为了满足用户在不同设备上便捷地体验游戏活动,【游戏活动h5自适应手机】成为了一个重要的设计标准。这种H5(HTML5)网页应用能够自动适配不同尺寸的手机屏幕,确保用户在手机上也能...

Global site tag (gtag.js) - Google Analytics