第 3 章 创建友好的Web表单

设计过复杂用户界面的人都知道基本的HTML表单控件有哪些限制。文本字段、选择菜单、单选按钮、复选框等基本控件并不能很好地满足开发者的需求。有时,你还要反复教用户如何使用繁杂的多选列表——“按住Ctrl键并点击目标条目,如果你用的是Mac,就请按住command键”。

因此,如同所有优秀的Web开发者一样,你也开始使用jQuery UI1,或者结合HTML、CSS及JavaScript开发自己的控件或功能。但如果看到了一个带有滑动条、日历控件、数字调节框、自动完成字段以及所见即所得编辑器的表单,瞬间你会发现自己以前做的竟是噩梦。对于自己开发的控件,务必要确保它们跟页面上的其他控件或其他JavaScript库不会产生冲突。试想,你花了几个小时开发出一个日历选择控件,之后却发现颜色选择控件无法工作了,原因是颜色选择控件代码有缺陷,导致它无法跟项目所用的jQuery最新版本兼容,这该多么打击人啊!

1. http://jqueryui.com/

如果现在你笑了,那是因为你也有过类似的经历;如果你火冒三丈,八成还是同样的原因。但是,千万别泄气!本章将使用新的HTML5表单字段类型来创建一些界面,并实现自动聚焦及占位文本功能。接下来,我们将介绍客户端验证功能,并讨论使用新的contenteditable属性把HTML字段转换为用户输入控件。

在本章中,我们将介绍以下内容。

  • 电子邮件字段(<input type="email">):呈现一个用于输入电子邮件地址的表单字段(O10.1、iOS、A3)
  • URL字段(<input type="url">):呈现一个用于输入URL的表单字段(O10.1、iOS5、A3)
  • 范围(滑动条)字段(<input type="range">):呈现一个滑动条控件(C5、S4、F23、IE10、O10.1)
  • 数值字段(<input type="number">):呈现一个用于输入数值的表单字段,常显示为数值框(C5、S5、O10.1、iOS5、A3)
  • 颜色选择字段(<input type="color">):呈现一个用于指定颜色的表单字段(C5, O11)
  • 日期选择字段(<input type="date">):呈现一个用于选择日期的表单字段。支持日期、月份或星期等选项(C5、S5、O10.1)
  • 日期/时间选择字段(<input type="datetime">):呈现一个用于选择日期及时间的表单字段。支持日期时间、本地日期时间或时间等多种选项(S5、O10.1)
  • 搜索字段(<input type="search">):呈现一个用于输入搜索关键字的表单字段(C5、S4、O10.1、iOS)
  • 自动聚焦功能(<input type="text" autofocus>):支持将焦点放置在指定元素上(C5、S4)
  • 占位文本功能(<input type="email" placeholder="me@example.com">):支持在表单字段中呈现占位文本(C5、F4、S4)
  • 必填字段(<input type="email" required>):如果指定字段未填入值,则不允许提交页面(C23、F16、IE10、O12)
  • 正则表达式验证功能(<input pattern="/^(\s*|\d+)$/">):如果字段内容不匹配指定模式,则不允许提交页面(C23、F16、IE10、O12)
  • 就地编辑功能(<p contenteditable>lorem ipsum</p>): 在浏览器中提供内容的就地编辑功能(C4、F3.5、S3.2、IE6、O10.1、iOS5、A3)

首先,我们将讨论一些非常有用的表单字段类型。

目录