前端BUI框架表单教程-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

前端BUI框架表单教程

简介: 在开发后台的过程中,前后端需要频繁的通信,后台页面使用BUI模板,后端使用Java开发。 BUI表单使用 BUI提供了4种表单布局,这四种表单布局,我觉得都可以使用 水平表单来替代。

在开发后台的过程中,前后端需要频繁的通信,后台页面使用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>

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

img_017e129e615d2b0f1e399f5d0668d9b2.png
效果图
再看一个案例
// 这里我们更改了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>

效果图

img_286cc13417521929d3006b27e3dfd21b.png
效果图

想要让表单变宽,在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参考

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: