使用blueprintcss制作表单布局

yanhua

在做项目时经常遇到客户要求把一个纸质的表单电子化，而且要求尽量和纸质的相一致。我们常用的做法是用HTML的table套table的做法，遇到复杂的表单就非常难办了。最近我们做的一个产品中是通过在可视化的IDE画线来把表单的框架画出来，其实运行时是用JS来化线实现的。虽然可能比用table套table的方式好了些，不过还是有些缺点的：

• 太依赖于IDE，离开IDE代码不好理解
  
• 画线操作不是很好用，即使用photoshop来画也不见得好画，何况一般的IDE要考虑转换成JS和HTML有很多限制，所以也做不了Photoshop那么强大
  
• 线框和里面的东西没有容器的关系，只是通过绝对定位定在那里，其实是互不相干的
  
• 调整起来不容易
  

今天使用blueprintcss这个CSS框架试着做了一个布局，我觉得很好用，代码简洁，效果也不错。


 上面这个表单子用的了简单的几行代码：
<div class="container formtable"><!-- 第一行 --><div class="span-12 cell">会议议题：<input style="width:380px;" class="lineinput"/></div><div class="span-12 last cell">主持嘉宾：<input name="abc" type="radio">郭德纲<input name="abc" type="radio" checked>王小丫<input name="abc" type="radio">小沈阳</div><!-- 第二行 --><div class="span-10 cell">与会人员：<input style="width:200px;" class="lineinput"/></div><div class="span-10 cell">参会人员：<input style="width:200px;"  class="lineinput"/></div><div class="span-4 last cell">补充说明：<input style="width:80px;"  class="lineinput"/></div><!-- 第三行 --><div class="span-24 last cell" style="height: 150px"><textareastyle="height: 120px; width: 930px">请输入意见！</textarea></div><!-- 第四行 --><div class="span-6 cell">记录员：林冲</div><div class="span-6 cell">填报时间：2009-1-1</div><div class="span-6 cell">负责人：宋江</div><div class="span-6 last cell">开会地点：聚义厅</div></div> 代码很容易读懂，就不解释了，附上全部的源码。
 
blueprint有个ruby的脚本文件，可以做很多自定义，打算有时间定义一个符合自己需求的版本，主要包括总体的宽度以及合适的单元格宽度。