谷歌 Web 开发最佳实践手册(3.1):创建出色的表单

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】:在移动设备上很难填写表单。拥有最少输入框的表单就是最好的表单。出色的表单提供语义化的输入类型。输入框的键名应该和用户输入类型一致;比如,用户应该在日历中选择日期。要时刻给予你的用户反馈信息。表单验证工具应该在用户提交表单之前就告诉他们应该怎么做。

在这节课中,我们将探讨:

  • 3.1 使用requestAutocomplete简化支付流程
  • 3.2 提供实时的表单验证
  • 3.3 给你的输入正确加标签和命名
  • 3.4 选择最佳的输入类型

3.1 使用requestAutocomplete简化支付流程

虽然requestAutocomplete这个设计是可以帮助用户填写任意表单的,但是目前它最常用于电商网站,这个在移动端订单放弃率高达97%的地方。想象一下,超市中97%的人,推着着满满一购物车他们想买的东西,突然把它们掀翻,然后走出超市。

学习重点

  • requestAutocomplete可以极大简化支付流程,并提高用户体验。
  • 如果requestAutocomplete是可用的,那么隐藏支付表单直接把用户引导至确认页面。
  • 确保输入域包含恰当的autocomplete属性。

不像一些网站依赖特定的支付服务提供商,requestAutocomplete直接向浏览器请求支付信息(例如姓名,地址,信用卡信息),这些数据都会像设置了autocomplete属性的输入域一样,被浏览器可选地保存下来。

requestAutocomplete的运作流程

最佳的用户体验是直接弹出requestAutocomplete的确认对话框,而不是加载显示支付表单页面。如果一切顺利,用户完全不应该看到表单。你只要为已有表单简单地加上requestAutoComplete,而不用改变表单域的name。简单地为每一个表单元素加上autocomplete属性和恰当的值,并且在form元素加上requestAutocomplete()函数。浏览器会为你做剩下的事情:

block

查看完整示例

form元素上的requestAutocomplete函数表明浏览器应该自动填充该表单。因为是一个关乎安全性的特性,所以这个函数的运行必须由用户的行为触发,例如触屏或者鼠标点击。一个对话框会弹出,询问用户是否允许自动填充,还有哪些数据是他们想自动填充的。

查看完整示例

对于requestAutocomplete运行结果,如果这个函数顺利运行,那么就会触发autocomplete事件;如果它不能完成完成表单的填充,就会触发autocompleteerror事件。如果它成功完成了表单的填充并且通过了所有的表单验证,那么就可以提交表单并且移步到最后的确认页面。

记住

  • 如果你需要请求用户的私人信息或者信用卡数据,要保证你的页面是通过SSL服务提供给用户的。否则弹出的对话框会提示用户他们提供的信息或许有安全隐患。

 


3.2 提供实时的表单验证

实时的表单验证不仅仅可以让表单数据更加清楚,还可以提高用户体验。现代浏览器有几种内置的工具提供实时表单验证,并且可以防止用户提交不合法的表单数据。加上可视化的线索可以表明一个表单是否被正确地填写。

学习重点

  • 借助浏览器内置的表单验证属性,例如patternrequiredminmax, 等。
  • 使用JavaScript和约束验证API(Constraints Validation API)来完成更复杂的验证需求。
  • 在用户输入的同时显示错误信息,并且在用户尝试提交表单的时候,提醒用户哪些表单域是需要重写的。

使用这些属性来进行输入验证

pattern属性

pattern属性制定一个正则表达式来验证输入的数据。例如,要验证一个美国的邮政编码(5个数字,有时候会后面会有一个破折号加4个数字),那么我们就可以这样设置pattern属性:

一些常用的正则表达式:

描述 正则表达式
邮政地址 [a-zA-Z\d\s\-\,\#\.\+]+
邮政编码 (美国) ^\d{5,6}(?:[-\s]\d{4})?$
IP地址 ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$
信用卡号码 ^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})$
社会保障号码 ^\d{3}-\d{2}-\d{4}$
北美电话号码 ^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$

required属性

如果一个表单域被加上了required属性,那么在提交表单的时候,该表单域的值一定不能为空。例如,为了保证邮政编码一定不能为空,我们可以简单地加上required属性:

minmax,和step属性

对于数字类型的输入,像numberrange甚至是data/time输入,你都可以指定输入的最大最小值,和滑块控件和数字增减控件每次的步长。例如,鞋码的输入可以设置小值为1,最大值为13,每次增减步长为0.5:

maxlength属性

maxlength属性可以指定用户在输入框或者文本框中可输入的值最大长度,当你需要限制用户提供的信息的时候,这相当有用。例如,如果你想限制输入的文件名最多只能有12个字符,你可以这样做:

The novalidate attribute

在一些情况下,你也许想允许用户提交包含非法输入数据的表单。这时候你就可以在form元素或者每个单独的输入域中使用novalidate属性。在这种情况下并不会影响伪类和JavaScript API进行表单合法性验证:

记住
* 即使客户端做了输入验证,为了保证可靠性和安全性,服务端也需要对用户输入数据进行合法性检验。

使用JavaScript进行更复杂的实时表单验证

当内置的验证工具加正则表达式都无法满足需要,你可以使用约束验证(Constrains Validation API),一个用于处理自定义验证的强大工具。这个API可以让你自定义错误,检验一个元素是否输入合法和定义元素不合法的原因。

API 说明
setCustomValidity() 设置自定义验证出错信息,并且把ValidityState对象的curstomError属性设置为true。 property of the ValidityState object to true.
validationMessage 输入验证失败的时候返回一个说明出错原因的字符串。
checkValidity() 如果一个元素满足它所有的验证约束,则返回true,否则返回false
validity Returns a ValidityState返回一个ValidityState对象,包含这个元素的验证状态信息。

设置自定义验证信息

如果一个输入域没通过合法性验证,用setCustomValidity()来标记这个域是不合法的并且解释它为何不合法。例如,一个注册表单可能会需要用户输入两次来确认他们邮箱地址。当第二个输入触发blur事件的时候,对两次输入进行验证,并且设置恰当的反馈信息。例如:

查看完整示例

防止用户提交不合法的表单

因为不是所有浏览器都会防止用户提交不合法的表单,所以你应该在submit事件中用checkValidity()来验证表单元素是否合法。例如:

查看完整示例

实时显示反馈

在用户提交表单之前就在每一个输入域中提供可视化的信息,来提醒用户是否正确输入,这将会对用户很有帮助。HTML5也引入了一系列基于输入元素的值或者属性的新伪类来改变输入元素的样式。

Pseudo-class 作用
:valid 当用户完成了一个输入域所有输入验证的要求,就明确地为该输入设置样式
:invalid 当用户并没有完成一个输入域所有输入验证的要求,就明确地为该输入设置样式
:required 当一个输入元素有required属性的时候,就明确地为该输入设置样式
:optional 当一个输入元素没有required属性的时候,就明确地为该输入设置样式
:in-range 当一个输入元素的值是数字并数字在限定范围内的时候,就明确地为该输入设置样式
:out-of-range 当一个输入元素的值是数字并数字超过了限定范围的时候,就明确地为该输入设置样式

立即验证指的是当页面已经加载完毕,用户还没来得及填写表单,表单域就被标志为不合法。这也意味着用户在输入的时候也会看到提示不合法的表单样式。为了防止这种情况出现,你应该将结合CSS和JavaScript,在用户访问过该域以后才显示不合法的样式。

查看完整示例

 

查看完整示例

重要

  • 你应该一次性地显示表单上的所有问题所在,而不是一次一个地提示。

 


3.3 给你的输入正确加标签和命名

学习重点

  • 一定要给表单输入框加上label,并且保证它们在输入框获得焦点的时候要是可见的。
  • 使用placeholder提供引导,告诉用户你想他们输入的内容。
  • 帮助浏览器自动补全表单,为表单元素提供明确的name并且加上autocomplete属性。

 

标签的重要性

label标签给用户提供引导,告诉他们什么某个表单元素需要填写什么信息。通过把输入元素放入一个label标签中,可以把每一个label和一个特定的输入元素关联起来,或者通过使用for属性标签来达到同样的效果。为表单输入元素应用label标签可以增大目标元素的可触碰范围:用户可以通过点击label或者input来使输入元素获得焦点。

查看完整示例

 

标签的大小和放置

标签和输入元素应该足够大,可以方便地被用户所接触到。在分辨率小的情况下,标签应该在输入元素上方,而在分辨率较高时,标签应该在输入元素旁边。要确保标签和其对应的输入元素要同时可见。要注意自定义的滚动处理(译注:例如使用JS控制滚动条)可能会把输入元素滚动到页面顶端而隐藏了标签元素,也要注意放在输入框下方的标签可能会被用户的虚拟键盘所遮挡。

 

使用占位符(placeholders)

placeholder属性会使输入框以浅色文字显示输入的值,提醒用户他们应该输入的内容,当输入框获取到焦点的时候,浅色文字就会消失。

记住

  • 当输入框获取到焦点的时候,占位符就会马上消失,所以它们并不可以替代标签。他们应该用作一种可以帮助引导用户输入格式和内容的增强。

 

使用metadata激活自动补全

当网站自动填写例如一些例如姓名、邮件这样的常用的表单输入的时候,用户会觉得很爽,此外,自动补全可以减少潜在的输入错误——尤其是在用户使用虚拟键盘和移动设备的时候。

浏览器基于用户设定使用多种方法来决定哪些表单域可以自动补全,而你可以在每一个输入元素上都加上nameautocomplete属性来提示浏览器自动补全。

例如,为了提示浏览器应该自动补全用户名、邮箱地址和电话号码,你应该这样做:

查看完整示例

推荐的nameautocomplete属性值

内容类型 name属性 autocomplete属性
Name name fname mname lname name
Email email email
Address address city region provincestate zip zip2 postal country street-address locality regionpostal-code country
Phone phone mobile country-code area-code exchange suffix ext tel
Credit Card ccname cardnumber cvc ccmonthccyear exp-date card-type cc-name cc-number cc-csc cc-exp-monthcc-exp-year cc-exp cc-type

autocomplete属性应该根据具体上下文,加上例如shipping或者billing这样的前缀。

记住

  • 自动补全只会在表单请求方法为post的时候起效。

autofocus属性

在某些表单中,例如Google主页,只有一个你需要用户输入的地方,你可以加上autofocus属性。设置了这个属性以后,桌面浏览器会自动聚焦到这个输入框,用户就可以更方便、更快速地开始填写表单。移动设备上的浏览器会忽略autofocus属性,防止键盘意外地出现。

要小心地使用autofocus属性,因为它会获取到键盘的焦点,可能使得无法使用退格键进行浏览器导航。

 


3.4 选择最佳的输入类型

手机用户的每一个点击都至关重要。当输入电话号码的时候,用户喜欢网站自动呈现数字键盘,或在输入的时候会自动补全输入。尽可能地减少用户在表单中按键次数。

学习重点

  • 为你的输入数据选择最接近的输入类型,来简化输入流程。
  • 当用户输入的时候,给他们提供可选的数据列表。

 

HTML5 输入类型

HTML5引入了大量的输入类型。这些新的输入类型可以提示浏览器,屏幕键盘应该显示什么样的键盘布局类型。用户无需切换键盘,就可以轻松地键入他们需要输入的信息,他们输入的时候都会看到恰当的键盘布局。

输入type 示例键盘布局
url
URL输入。输入必须是有效的URI格式,例如 http://ftp:// ormailto:.
tel
电话号码输入。它不会执行特定的语法检查,如果你需要用户输入特定的格式,可以加上pattern属性。
email
邮箱地址输入。并且提醒浏览器在键盘上应该默认显示@按键。如果需要用户输入多个邮箱地址,你可以多次使用该属性。
search
一个和系统搜索域样式一致的文本输入域
number
数字类型输入。可以输入任意正常的整数或者小数。
range
数字输入,不像上述的数字输入类型,这个输入值会相对不重要。它会以滑块控件的形式呈现给用户。
datetime-local
日期和时间的输入,它所提供的时区是当地时区。
date
(只能是)日期的输入,不提供时区。
time
(只能是)时间的输入,不提供时区。
week
(只能是)星期的输入,不提供时区。
month
(只能是)月份的输入,不提供时区。
color
颜色的选择。

使用datalist在输入的时候提供提示

datalist元素不是一个输入的类型,而是和一个特定输入域相关的一系列提示输入值。当用户输入的时候,它给浏览器提供自动补全选项。和select元素不一样,用户不需要在长长的列表中寻找他们需要的值,也并不限制他们一定要从列表中选择来进行输入,datalist只是在用户输入的时候提供提示。

查看完整示例

记住
datalist元素只提供提示,并没有限制用户一定要从提供的提示列表中进行选择。

收藏 1 评论

关于作者:戴嘉华

戴嘉华:热爱技术,专注于Web前端开发;无不良嗜好,仅表示对各种兼容不感兴趣。身为程序猿这一被上帝指派的群体中的一员,宣誓坚决不打没有质感的代码。(新浪微博:@戴嘉华_) 个人主页 · 我的文章 · 5

相关文章

可能感兴趣的话题



直接登录
最新评论
  • 灯盏细辛   2014/05/19

    第一次看到各种type的键盘对应关系!总结的好!!

跳到底部
返回顶部