网页表单的门道 / 理想园

在好久好久以前,我曾经改造过一张纸质表单。不过现在基于网页的电子表单越来越多,他们背后其实也有很多学问的。琐碎地提几点吧。

有菜单可选

还记得曾经有份最过分的表单,要求选择自己要去的门店。然后他设计了一个下拉菜单,里面是全国几百家没有排序规律的门店名单,几百选一,一点一点翻。

看到这种表单真的是会崩溃的,最后我默默按开 F12,直接用程序筛选选中了自己要的门店……还真没功夫一项一项看。

有时候在国外的网站上要选择国家,那个也是很烦的过程,不过有经验了之后也不是那么难。比如我们要选择中国,大部分情况下会按英文字母排序,那就是 C,一般找智利的下一项就有了。没有的话,那就是按拼音排序的 Z,通常是最后一项,一般在 Google 的网站上会这样排。

有菜单,看起来是好事,不过菜单里的项目多起来之后,怎么更方便地选择也成了个问题。有 JavaScript 辅助的表单通常有这几种解决方案:

  • 搞个多级下拉菜单,比如选择省 > 市 > 县;
  • 搞个筛选器,根据输入的内容来显示选项。

下拉菜单无处不在。你在文本框输入的内容,很多时候浏览器也会帮你记着。在电脑上,删除里面的某一项内容也很简单,鼠标放在要删除的选项上,按键盘的 Delete,就会消失了。当然如果不是浏览器自带的自动保存,就多半不支持这么删记录了。

还有密码自动填写。这个功能也经历了好些升级,主要是有的网站觉得“自动填写不好”,就通过一些技术手段让浏览器以为那不是登录表单,就没有自动填写功能了。这个见仁见智,我个人觉得,选择权还是得交给用户、交给浏览器。

键盘的学问

很多人做表单的时候,会很容易忽视键盘操作。毕竟键盘玩得溜的多是极客,似乎没必要理他们。(刚才删自动保存记录的方法就非常极客嘛)

不过,就举最简单的一个例子。在登录界面,输完帐号密码之后,你随手一回车,有的表单就提交了,有的表单却需要你去按那个提交按钮。这就是有没有按照标准表单来设计所带来的不同。

对于标准的表单,你按下回车之后,浏览器会试图执行表单的提交操作。只要网页按照标准设计,定义了表单的提交操作,回车就有效果了。而有的页面,设计的是“按键读表单”,并不是标准的提交操作,所以就必须按键才能进行下一步了。

在手机上填表单的时候,有时你会发现弹出来的键盘不大一样,有时会多个 @ 号(填邮箱),有时会只有数字,有时键盘还多了个搜索键。这个是定义了文本框类型的结果。

在只需要输数字的时候,弹个数字键盘,感觉还是特别舒服的呢。

语义和校验

刚才提到了按需变化的键盘,其实它不仅有方便用户的作用,还有校验输入数据的效果。你试着在那种数字框里输个字母,待会提交表单的时候,就会提示错误啦,那就是浏览器的功劳。

这类校验,其实是 HTML5 的标准。在以前,这类客户端校验都得增加额外的程序脚本来实现。基于 HTML5 的校验,一是简单,二呢,也属于有“语义”,也就是说,这个表单的要求是通过定义“属性”实现的,而不是一堆程序来定义,表达的形式更清晰。

说到语义,我每次研究那种在线表单的时候,都会关注一个点:点击文本框边上的标题,比如点了下“姓名”,看光标会不会进到对应的文本框,马上就可以输入文字。

这个其实大多也是靠“语义”实现的。只要把文本框的标题用 <label> 包含起来,然后定义一下它对应的文本框的编号,就能实现这个效果了。它表达了文本框标题与文本框之间的关系。

一般来说,关注了这个点的网页表单,要不就是抄例子抄得好,要不就是真正理解网页表单的精髓啦。

发表评论

电子邮件地址不会被公开。 必填项已用*标注