html表单框架案例,前端BUI框架表单教程

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

BUI表单使用

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

水平表单的用法

1、页面中中引入CSS样式(如果需要动态效果，后期可引入JS文件)

在页面head标签中引入，也可以下载到本地引入，下载到本地的好处是可以自己查看css文件中的内容

2、根据需要编写表单

所有的表单元素肯定都是要在

标签里面的，form标签的一些基本用法如下 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。// action属性，代表传递表单数据的后台地址，

// method属性，说明当前表单以什么方法向后台传输数据，GET，POST，DELETE，PUT，HEAD等。

// 最常用的是`GET`和`POST`

First name: 

Last name: 

3、填充表单元素

根据BUI框架，我们可以编写适合自己的表单布局。

// class为row的div元素，说明这个div里面的所有元素如果不超过页面宽度的情况下，在同一行。//最大宽度为span24，span8基本约为页面的1/3。这里我们用了两个span8，可以猜测页面有两个在同一水平线的div。//其余的class照抄，先不用管太多// input必须要指定name属性，以便向后台传递数据，// id属性我觉得加上会更好，input的class也抄上。

            

上架时间：

下架时间：

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

效果图再看一个案例// 这里我们更改了input的class值，class的值一般为control-text会好一些。

            

存量：*

销量：*

效果图

效果图

想要让表单变宽，在div上span的数值大一点，input元素的值大一些。

每一个row类的div就是一行。

加上提交和重置按钮

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

提交

重置

总结

其余一些细节性问题，可以调整参考官方文档。

总结步骤如下：

1、引入样式表，有需要的话引入一些js库，做好html基本页面

2、在页面里面写表单，加上表单样式

3、根据需要填充表单元素

4、最后加上提交按钮

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

附录