合同在线填写的form设计是一个令人头疼的问题。对于合同填写一般有两种模式。
第一种,按照合同格式设计表单,将input项嵌入到合同中。优点是上下文清晰,input的描述简单,输入可以对照纸质部分进行录入。缺点是输入人比较难于获取必须输入项的位置,错误信息不能inline表示,页面设计较为复杂。
另一种模式将输入项提取出来,按照一般的表单进行设计。优点是设计简单,缺点是无上下文关联,表单input的label描述难于精准。而对于长表单的设计,现行的搞法分为三种,一种是不作为,一种是使用wizard模式,另外一种比较新的处理方式是accordion,具体设计可参照[url]http://www.alistapart.com/articles/testing-accordion-forms/[/url]。但据我测试,accordion对ui的要求最高,需要使用大量的脚本对错误信息进行处理。
经过两项比较,我决定采用一种简单的第三条路,姑且命名为[b]tag模式。[/b]
具体实现如下。假设我们使用bootstrap作为前端grid。
span5中间放合同样本,原文,去word生成的标签,在所有填写项之前加span.badge,给input项编号。
span5中放form,在input项中对应家span.badge,这样可以直接找的对应上下文。
这种方式下表单设计随意。比如我用rails,直接simple_form+bootstrap搞定。
个人觉得开发简单,定位简单,功能效果不差,欢迎剽窃。
第一种,按照合同格式设计表单,将input项嵌入到合同中。优点是上下文清晰,input的描述简单,输入可以对照纸质部分进行录入。缺点是输入人比较难于获取必须输入项的位置,错误信息不能inline表示,页面设计较为复杂。
另一种模式将输入项提取出来,按照一般的表单进行设计。优点是设计简单,缺点是无上下文关联,表单input的label描述难于精准。而对于长表单的设计,现行的搞法分为三种,一种是不作为,一种是使用wizard模式,另外一种比较新的处理方式是accordion,具体设计可参照[url]http://www.alistapart.com/articles/testing-accordion-forms/[/url]。但据我测试,accordion对ui的要求最高,需要使用大量的脚本对错误信息进行处理。
经过两项比较,我决定采用一种简单的第三条路,姑且命名为[b]tag模式。[/b]
具体实现如下。假设我们使用bootstrap作为前端grid。
span5中间放合同样本,原文,去word生成的标签,在所有填写项之前加span.badge,给input项编号。
span5中放form,在input项中对应家span.badge,这样可以直接找的对应上下文。
这种方式下表单设计随意。比如我用rails,直接simple_form+bootstrap搞定。
个人觉得开发简单,定位简单,功能效果不差,欢迎剽窃。