前端BUI框架表单教程

在开发后台的过程中，前后端需要频繁的通信，后台页面使用BUI模板，后端使用Java开发。

BUI表单使用

BUI提供了4种表单布局，这四种表单布局，我觉得都可以使用 水平表单来替代。DIV本身就是一个块，DIV就是垂直布局的。

水平表单的用法

1、页面中中引入CSS样式(如果需要动态效果，后期可引入JS文件)
在页面head标签中引入，也可以下载到本地引入，下载到本地的好处是可以自己查看css文件中的内容

 <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
 <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">

2、根据需要编写表单
所有的表单元素肯定都是要在<form>标签里面的，form标签的一些基本用法如下

<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。

// action属性，代表传递表单数据的后台地址，
// method属性，说明当前表单以什么方法向后台传输数据，GET，POST，DELETE，PUT，HEAD等。
// 最常用的是`GET`和`POST`
<form action="/api/form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

3、填充表单元素
根据BUI框架，我们可以编写适合自己的表单布局。

<form class="well form-horizontal" action="/add" method="post" >
  
// class为row的div元素，说明这个div里面的所有元素如果不超过页面宽度的情况下，在同一行。
//最大宽度为span24，span8基本约为页面的1/3。这里我们用了两个span8，可以猜测页面有两个在同一水平线的div。
//其余的class照抄，先不用管太多

// input必须要指定name属性，以便向后台传递数据，
// id属性我觉得加上会更好，input的class也抄上。

        <div class="row">
            <div class="control-group span8">
                <label class="control-label">上架时间：</label>
                <div class="controls">
                    <input type="datetime" class="calendar calendar-time" name="startTime" id="start_time" />
                </div>
            </div>

            <div class="control-group span8">
                <label class="control-label">下架时间：</label>
                <div class="controls">
                    <input type="datetime" class="calendar calendar-time" name="endTime" id="end_time" />
                </div>
            </div>
        </div>
</form>

上面的表单效果图，可以看到在同一行，等宽。

效果图

再看一个案例

// 这里我们更改了input的class值，class的值一般为control-text会好一些。
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">存量：<s>*</s></label>
                <div class="controls">
                    <input type="text" class="control-text" name="stock" id="stock" />
                </div>
            </div>
            <div class="control-group span8">
                <label class="control-label">销量：<s>*</s></label>
                <div class="controls">
                    <input type="text" class="control-text" name="sold" id="sold" />
                </div>
            </div>
        </div>

效果图

效果图

想要让表单变宽，在div上span的数值大一点，input元素的值大一些。
每一个row类的div就是一行。

加上提交和重置按钮

最后在表单里面加上提交按钮

       <div class="row">
            <div class="form-actions offset3">
                <button type="submit" class="button button-primary">提交</button>
                <button type="reset" class="button">重置</button>
            </div>
        </div>

总结

其余一些细节性问题，可以调整参考官方文档。
总结步骤如下：
1、引入样式表，有需要的话引入一些js库，做好html基本页面
2、在页面里面写表单，加上表单样式
3、根据需要填充表单元素
4、最后加上提交按钮

如果需要使用ajax请参考jQuery的ajax。

附录

BUI 表单参考
jQuery ajax参考