前言
想想我们每天使用的网站,无论写博客或对别人的博客进行评论,还是使用社会化网站
如 Facebook 与朋友保持联络,又或者使用 Email 如 Yahoo 或 Google、经常会访问一些喜欢
的论坛、上传精彩的照片到图片分享网站、线购买了某个产品或进行了评论。所有这些网络
上进行的活动,我们都同样遇到了什么?
没错,表单,Forms!
我们每天都要使用各种类型的表单,表单是我们与网站交互最多的部分。高效、美观的
表单能让我们轻松愉悦地与网站进行交互,下次还会回来继续寻求服务。而糟糕的表单使我
们感觉挫折、恼怒、躲避,匆忙点击浏览器的“返回”按钮逃离网站。
虽然表单无处不在如此重要,但是许多 Web 开发人员发现创建表单是一项单调、繁琐、
耗时、易产生挫折的任务。但事实上只要我们知道了怎么做,这项工作也会轻松有趣。
本书充满了技术、技巧、实例,旨在帮助你创建美观的表单。引导你体验表单创建的全
过程,从 表单最初的计划和研究到设计、创建和增强。阅读完本书,你将满怀信心的投入到
下一个项目的表单设计工作,创建完美的表单。
本书将带领你体验一个完整的表单创建过程,从表单的规划设计、标签结构、视觉样式、
及 JavaScript 脚本增强和支持。
谁该阅读本书
你可能是一个有经验的 web 开发人员,已经开发过许多表单,但结果却总是不太满意。
你也可能是刚刚进入 web 开发的从业者,也可能是一个界面设计师、是一个使用 HTML 和
CSS 的前端开发人员,或者是一个 JavaScript 专家,或者综合了前面的几个角色。只要你涉
及到表单创建过程的任何部分,这本书都非常适合你。
本书内容大纲
第一章:规划(需求和交互设计)
一个完美的表单需从一个周密的计划(研究)开始。我们先来了解一些在创建表单时要
用到的一些控件或组件。然后我们将介绍如何用一些研究方法如用例、场景、纸面原型、人
物角色等,为表单的创建打下坚实基础。综合所有这些,帮助你描绘一份稳固的蓝图:用户
需要什么、表单应该是怎样的。
第二章:设计(视觉设计)
当然,漂亮的视觉设计会让用户赞叹,但是一个真正高效的设计应该同时注重可用性和
艺术性。本章中我们将学习如何综合使用网格系统(Grid System)、颜色、字体、图标、纹
理,使得表单的设计既迷人又易用。
第三章:结构(HTML)
表单需要有一个优良的结构。这种良好结构是由语义化、结构化的 HTML 创建。我们将
深入讨论强调可用性、可访问性(无障碍访问)及 HTML 可读性的目前网站上可行的最佳实
践方法。
第四章:样式(CSS)
有经验的 Web 表单者熟知许多浏览器上的常见的 bug、奇怪的不一致性、恼人的行为。
本章中我们将仔细学习一些已被验证的进行表单布局的 CSS 技巧和技术,与简洁语义化的
HTML 代码完美配合,达到完美的表单设计效果。
第五章:增强(JQuery)
精心地使用 JavaScript,使表单得呈现更加卓越的使用体验。本章阐述的内容能增强表
单功能,例如客户端校验、密码安全强度检测以及一些美观性的控制(如自定义下拉菜单和
复选框等控件的外观)。
第一章 规划(需求和交互设计)
表单,不管你喜欢它还是讨厌它,它都是 web 设计和开发的必要组成部分。从简单的
登录页面到复杂的后台管理面板,表单是 web 网站或应用的重要交互元素。表单承载着数
据,必须慎重地对待!
表单的开发方法会影响以下不同方面:
易用性——你的表单易于理解、容易使用吗?
可访问性——不以正常(常规)方式/途径访问网站的人,也能使用你的表单吗?
容错性——你的表单能确保所收集到的信息无错吗?
创建良好的表单对设计师和开发人员来说都是一个复杂的过程。表单创建过程中需要考
虑许多方面:需求、设计、结构化(用 HTML)、样式化(用 CSS)和增强(用 JavaScript),
有很多工作要做!但是这些工作最终都是值得的:一个能够容错、可访问、对用户友好的表
单是让人开心的表单,并带来了开心的用户。
表单的构成元素
理解构成表单的不同元素非常重要,这样你可以知道哪些东西你可以利用。首先让我们
看一些基本的默认元素,然后再去了解一些高级元素(功能)的例子。这些高级元素的功能
可以通过 JavaScript 来实现。
基本元素
HTML 提供了许多表单元素,每个都用于接收不同类型的信息。不管是在网络上订机票
或购买日用品,只需要使用这些基本元素就可以创建符合要求的表单。
文本输入框(Text Fields)
用来输入文本。文本框可能会设定一个最大输入长度,否则可以输入任何长度的文本。
如下图:
图 1.1 用于输入用户名和密码的输入框
单选按钮(Radio Buttons)
有时需要让用户从预先设定的一组值中的选择某一个值,限制用户输入值的范围。单选
按钮是解决用户只能选择一个值的理想解决方案。单选按钮经常在每个选项前放一个圆形按
钮。如下图:
图 1.2 用于选择性别的单选按钮
复选框(Checkboxes)
复选框是选择预先设置一组值的另一种方式,但可以同时选择多个值。复选框经常在每
个选项前放一个方形按钮,选择后的复选框,有一个“勾”符号。如下图:
图 1.3 选择多个自己的兴趣爱好
文本标签(Labels)
文本标签用于向用户传达某个输入元素(如输入框)的含义。输入元素上的文本标签一
般都可以点击,以提高可用性。如单选按钮、复选框中的文本标签就是可以点击的。如下图:
图 1.4 点击文本标签可以选择或取消选择复选框
文本区域(Textareas)
与文本输入框非常相似,但是它可以输入多行文本。当输入的文本超过文本区域的高度
值或宽度值时,则自动出现滚动条。在某些浏览器如 Google Chrome、Safari 中,可以拖动
右下角的调整块来调整大小。
图 1.5 在 Google Chrome 浏览器中的文本区框,右下角有可拖到改变尺寸大小的操作。