合同填写 form 设计, tag模式

合同在线填写的form设计是一个令人头疼的问题。对于合同填写一般有两种模式。

第一种，按照合同格式设计表单，将input项嵌入到合同中。优点是上下文清晰，input的描述简单，输入可以对照纸质部分进行录入。缺点是输入人比较难于获取必须输入项的位置，错误信息不能inline表示，页面设计较为复杂。

另一种模式将输入项提取出来，按照一般的表单进行设计。优点是设计简单，缺点是无上下文关联，表单input的label描述难于精准。而对于长表单的设计，现行的搞法分为三种，一种是不作为，一种是使用wizard模式，另外一种比较新的处理方式是accordion，具体设计可参照http://www.alistapart.com/articles/testing-accordion-forms/。但据我测试，accordion对ui的要求最高，需要使用大量的脚本对错误信息进行处理。

经过两项比较，我决定采用一种简单的第三条路，姑且命名为tag模式。

具体实现如下。假设我们使用bootstrap作为前端grid。

span5中间放合同样本，原文，去word生成的标签，在所有填写项之前加span.badge,给input项编号。

span5中放form,在input项中对应家span.badge，这样可以直接找的对应上下文。
这种方式下表单设计随意。比如我用rails，直接simple_form+bootstrap搞定。
个人觉得开发简单，定位简单，功能效果不差，欢迎剽窃。