精华内容
下载资源
问答
  • 在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局...
  • 在Vuejs中轻松创建表单
  • PHP创建表单

    千次阅读 2019-03-31 21:29:48
    创建表单,需要数据源,运算过程,以及输出结果,我们将它分为三层,并且对应数据源,运算过程,以及输出结果,以某表单为例; 一 创建数据源, 创建名为data.php为数据源 二 第二层为运算过程,这一层是最...

    准备工作

    创建表单,需要数据源,运算过程,以及输出结果,我们将它分为三层,并且对应数据源,运算过程,以及输出结果,以某表单为例;
    在这里插入图片描述

    创建数据源,
    在这里插入图片描述

    在这里插入图片描述
    创建名为data.php为数据源

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    第二层为运算过程,这一层是最重要的

    在这里插入图片描述
    最后一层为输出结果
    是最为简单的

    展开全文
  • jQuery bootstrap自定义创建表单工具代码
  • 本文将介绍如何动态创建表单组件,我们最终实现的效果如下: 在阅读本文之前,请确保你已经掌握 Angular 响应式表单和动态创建组件的相关知识,如果对相关知识还不了解,推荐先阅读一下 Angular 4.x Reactive Forms...
  • 主要介绍了Yii2创建表单(ActiveForm)的方法,结合实例形式详细分析了Yii创建表单的详细步骤及相关函数与属性的使用技巧,需要的朋友可以参考下
  • Joomla网站怎么创建表单网站的类型有好多种,比如企业网站,品牌网站,电商网站,营销网站,个人博客站等等,网站的作用是向用户展示自己的信息,当然绝大数网站也需要希望通过用户提交表单来收集用户信息,那么...

    Joomla网站怎么创建表单网站的类型有好多种,比如企业网站,品牌网站,电商网站,营销网站,个人博客站等等,网站的作用是向用户展示自己的信息,当然绝大数网站也需要希望通过用户提交表单来收集用户信息,那么Joomla网站中怎么创建一个表单用来收集用户提交的信息呢?接下来我就来简述下大体流程。

    首先我来介绍一个插件,RsForm,用于创建表单和管理用户提交信息。

    下载并安装Rsform插件,并安装。

    安装完成后在 组件设置 中找到 RsForm ,点击 Manage Forms
    添加用户提交表单

    然后进入这个页面,我们点击新建

    添加用户提交表单

    点击新建进入下面的界面,左侧是表单元素 我们可以点击添加到表单之中。这里我注释了每个元素的类型和作用。

    在这里插入图片描述

    下面我添加了一个文本输入框类型的表单元素,简单介绍一下需要设置的选项

    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

    然后我们再修改一下表单信息

    添加用户提交表单

    点击保存,然后我们点击预览, 填写内容点击提交,测试是否可以将填写的信息提交到后台
    在这里插入图片描述

    提交信息之后,来到后台表单管理。

    添加用户提交表单

    在这里我们可以看到 ,已经有信息提交到我们的后台了。点击信息我们就可以看到用户提交的数据了

    添加用户提交表单

    如果您想让表单可以在网站的某个地方页面或者是地方出现,那么只需要添加个一个新的模块,类型选择RsForm,然后选择我们创建的表单,并未其选择一个模板的显示位置。

    添加用户提交表单

    这样就可以正常在网站前台显示我们添加的表单了!好了今天的分享就到这里,更多相关内容请关注我们!

    本文转自六艺开源:阅读原文

    展开全文
  • 在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。  Bootstrap表单类型分为三种格式:垂直或基本表单、内联表单、水平表单。 垂直或基本...
  • 在上一节自定义表单环境搭建好以后,我就正式开始尝试自己创建表单,在后台的处理就比较常规,主要是针对ueditor插件的功能在前端进行修改。 由于自己的前端相关技术太渣,因此好多东西都不会用,导致修改实现的...

    注:环境配置:activiti自定义流程之自定义表单(一):环境配置

     

    在上一节自定义表单环境搭建好以后,我就正式开始尝试自己创建表单,在后台的处理就比较常规,主要是针对ueditor插件的功能在前端进行修改。


    由于自己的前端相关技术太渣,因此好多东西都不会用,导致修改实现的过程也是破费了一番功夫,头皮发麻了好几天。

    既然是用别人的插件进行修改,那么我想如果只是单独的贴出我修改后的代码,可能没有前后进行对比好理解,因此这里就把原代码和修改后的同时对比着贴出,以便于朋友们能从对比中更快的得到启发。

    一、首先是前台创建表单,原文件示例是所有代码直接都写在了index.html文件中,文件在文章最后:

     

     

    我在修改的过程中感觉这个代码太长,貌似有点杂乱,因此就自作主张的把部分内容提取到了新建的js文件中,还有部分我觉得无关紧要的东西也进行了删除,然后我的index.html代码如下:

     

     

     

    <!DOCTYPE HTML>
    <html>
     <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link href="css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />
        <link href="css/site.css?2023" rel="stylesheet" type="text/css" />
        <link href="my_css/a.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            var _root='http://form/index.php?s=/',_controller = 'index';
        </script> 
     </head>
    <body style="margin:0">
    <!-- fixed navbar -->
    <!-- Docs page layout -->
    <div style="width:100%;height:60px;background-color:#ccf;border:1px solid blue;text-decoration:none">
         <img src="images/activiti.png" style="width:20%;height:98%;overflow:hidden;float:left"/>
         <ul style="margin-left:30px;margin-top:10px; padding: 0px; font-size: 30px; width:60%;overflow:hidden;float:left">
            <li><a href="#" onclick="toAdd();">新增表单</a></li>
            <li> | </li>
            <li><a href="#" onclick="formList();">表单列表</a></li>
         </ul>
    </div>
    <div id="idv1" style="width:100%;position: absolute;height:auto">
    <div style="width:70px;height:550px;position:relative;float:left;border:1px solid blue;background-color:#ccf">
      
    </div>
    <div id="formDiv" style="width:89%;height:auto;position:relative;float:left;margin-left:10px;margin-top:10px;">
    
    
    <div class="container">
    <form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html">
    <input type="hidden" name="fields" id="fields" value="0">
    <div style="width:98%;height:510px;margin-top:20px;border:3px solid grey">
      <p style="margin-top:10px;font-size:30px" >表单名称:<input type="text" id="formType"></input></p>
      <hr style="height:5px;border:none;border-top:5px ridge green;"/>
      <p style="margin-top:10px;font-size:30px" >表单设计:</p>
     <div >
    <p style="left:30px">
            <button type="button" onclick="leipiFormDesign.exec('text');" class="btn btn-info">文本框</button>
            <button type="button" onclick="leipiFormDesign.exec('textarea');" class="btn btn-info">多行文本</button>
            <button type="button" onclick="leipiFormDesign.exec('select');" class="btn btn-info">下拉菜单</button>
            <button type="button" onclick="leipiFormDesign.exec('radios');" class="btn btn-info">单选框</button>
            <button type="button" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-info">复选框</button>       
            <button type="button" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-info">列表控件</button>
           <!--   <button type="button" onclick="leipiFormDesign.findForm();" class="btn btn-info">form</button>-->
    </p>
    
    
    </div>
    <!-- afsddddddddd -->
    <div >
    <script id="myFormDesign" type="text/plain" style="width:99.8%;">
    </script>
    </div>   
    </div>
    <!-- afsddddddddd -->
    <div class="row">
    
    
    </div><!--end row-->
    </form>
    </div><!--end container-->
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js?2023"></script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js?2023"></script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.js?2023"> </script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/lang/zh-cn/zh-cn.js?2023"></script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/formdesign/leipi.formdesign.v4.js?2023"></script>
    <!-- script start-->  
    <script type="text/javascript" charset="utf-8" src="my_js/addForm.js"></script>
    <!-- script end -->
    <div style="width:1px;height:1px">
      <script type="text/javascript">
      var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
      document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F1e6fd3a46a5046661159c6bf55aad1cf' type='text/javascript'%3E%3C/script%3E"));
      </script>
    </div>
    
    
    </div>
    </div>
    </body>
    </html>
    

     

    相关的js文件命名为addForm.js如下:

     

     

    function toAdd(){
    	window.location.href="./"; 
    };
    function formList(){
    	window.location.href="my_views/formList.html"; 
    };
    
    
    var leipiEditor = UE.getEditor('myFormDesign',{
                toolleipi:true,//是否显示,设计器的 toolbars
                textarea: 'design_content',   
                //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
               toolbars:[[
                ]],
                //关闭字数统计
                wordCount:false,
                //关闭elementPath
                elementPathEnabled:false,
                //默认的编辑区域高度
                initialFrameHeight:300
                //,iframeCssUrl:"css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你网站css
                //更多其他参数,请参考ueditor.config.js中的配置项
            });
    
    
     var leipiFormDesign = {
    	findForm : function(){
    		window.location.href="my_views/formList.html";
    	},
        /*执行控件*/
        exec : function (method) {
            leipiEditor.execCommand(method);
        },
        /*
            Javascript 解析表单
            template 表单设计器里的Html内容
            fields 字段总数
        */
       parse_form:function(template,fields)
        {
            //正则  radios|checkboxs|select 匹配的边界 |--|  因为当使用 {} 时js报错
            var preg =  /(\|-<span(((?!<span).)*leipiplugins=\"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi,preg_attr =/(\w+)=\"(.?|.+?)\"/gi,preg_group =/<input.*?\/>/gi;
            if(!fields) fields = 0;
            var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0;
            var pno = 0;
            template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){
                var parse_attr = new Array(),attr_arr_all = new Object(),name = '', select_dot = '' , is_new=false;
                var p0 = plugin;
                var tag = p6 ? p6 : p4;
                //alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6);
                if(tag == 'radios' || tag == 'checkboxs')
                {
                    plugin = p2;
                }else if(tag == 'select')
                {
                    plugin = plugin.replace('|-','');
                    plugin = plugin.replace('-|','');
                }
                plugin.replace(preg_attr, function(str0,attr,val) {
                        if(attr=='name')
                        {
                            if(val=='leipiNewField')
                            {
                                is_new=true;
                                fields++;
                                val = 'data_'+fields;
                            }
                            name = val;
                        }
                        
                        if(tag=='select' && attr=='value')
                        {
                            if(!attr_arr_all[attr]) attr_arr_all[attr] = '';
                            attr_arr_all[attr] += select_dot + val;
                            select_dot = ',';
                        }else
                        {
                            attr_arr_all[attr] = val;
                        }
                        var oField = new Object();
                        oField[attr] = val;
                        parse_attr.push(oField);
                }) 
                /*alert(JSON.stringify(parse_attr));return;*/
                 if(tag =='checkboxs') /*复选组  多个字段 */
                 {
                    plugin = p0;
                    plugin = plugin.replace('|-','');
                    plugin = plugin.replace('-|','');
                    var name = 'checkboxs_'+checkboxs;
                    attr_arr_all['parse_name'] = name;
                    attr_arr_all['name'] = '';
                    attr_arr_all['value'] = '';
                    
                    attr_arr_all['content'] = '<span leipiplugins="checkboxs"  title="'+attr_arr_all['title']+'">';
                    var dot_name ='', dot_value = '';
                    p5.replace(preg_group, function(parse_group) {
                        var is_new=false,option = new Object();
                        parse_group.replace(preg_attr, function(str0,k,val) {
                            if(k=='name')
                            {
                                if(val=='leipiNewField')
                                {
                                    is_new=true;
                                    fields++;
                                    val = 'data_'+fields;
                                }
    
    
                                attr_arr_all['name'] += dot_name + val;
                                dot_name = ',';
    
    
                            }
                            else if(k=='value')
                            {
                                attr_arr_all['value'] += dot_value + val;
                                dot_value = ',';
    
    
                            }
                            option[k] = val;    
                        });
                        
                        if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();
                        attr_arr_all['options'].push(option);
                        //if(!option['checked']) option['checked'] = '';
                        var checked = option['checked'] !=undefined ? 'checked="checked"' : '';
                        attr_arr_all['content'] +='<input type="checkbox" name="'+option['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';
    
    
                        if(is_new)
                        {
                            var arr = new Object();
                            arr['name'] = option['name'];
                            arr['leipiplugins'] = attr_arr_all['leipiplugins'];
                            add_fields[option['name']] = arr;
                        }
                    });
                    attr_arr_all['content'] += '</span>';
    
    
                    //parse
                    template = template.replace(plugin,attr_arr_all['content']);
                    template_parse = template_parse.replace(plugin,'{'+name+'}');
                    template_parse = template_parse.replace('{|-','');
                    template_parse = template_parse.replace('-|}','');
                    template_data[pno] = attr_arr_all;
                    checkboxs++;
    
    
                 }else if(name)
                {
                    if(tag =='radios') /*单选组  一个字段*/
                    {
                        plugin = p0;
                        plugin = plugin.replace('|-','');
                        plugin = plugin.replace('-|','');
                        attr_arr_all['value'] = '';
                        attr_arr_all['content'] = '<span leipiplugins="radios" name="'+attr_arr_all['name']+'" title="'+attr_arr_all['title']+'">';
                        var dot='';
                        p5.replace(preg_group, function(parse_group) {
                            var option = new Object();
                            parse_group.replace(preg_attr, function(str0,k,val) {
                                if(k=='value')
                                {
                                    attr_arr_all['value'] += dot + val;
                                    dot = ',';
                                }
                                option[k] = val;    
                            });
                            option['name'] = attr_arr_all['name'];
                            if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();
                            attr_arr_all['options'].push(option);
                            //if(!option['checked']) option['checked'] = '';
                            var checked = option['checked'] !=undefined ? 'checked="checked"' : '';
                            attr_arr_all['content'] +='<input type="radio" name="'+attr_arr_all['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';
    
    
                        });
                        attr_arr_all['content'] += '</span>';
    
    
                    }else
                    {
                        attr_arr_all['content'] = is_new ? plugin.replace(/leipiNewField/,name) : plugin;
                    }
                    template = template.replace(plugin,attr_arr_all['content']);
                    template_parse = template_parse.replace(plugin,'{'+name+'}');
                    template_parse = template_parse.replace('{|-','');
                    template_parse = template_parse.replace('-|}','');
                    if(is_new)
                    {
                        var arr = new Object();
                        arr['name'] = name;
                        arr['leipiplugins'] = attr_arr_all['leipiplugins'];
                        add_fields[arr['name']] = arr;
                    }
                    template_data[pno] = attr_arr_all;   
                }
                pno++;
            })
            var parse_form = new Object({
                'fields':fields,//总字段数
                'template':template,//完整html
                'parse':template_parse,//控件替换为{data_1}的html
                'data':template_data,//控件属性
                'add_fields':add_fields//新增控件
            });
            return JSON.stringify(parse_form);
        },
        /*type  =  save 保存设计 versions 保存版本  close关闭 */
        fnCheckForm : function ( type ) {
        	var formType=document.getElementById("formType").value;
            if(leipiEditor.queryCommandState( 'source' ))
                leipiEditor.execCommand('source');//切换到编辑模式才提交,否则有bug   
            if(leipiEditor.hasContents()){
                leipiEditor.sync();/*同步内容*/
                //--------------以下仅参考-----------------------------------------------------------------------------------------------------
                var type_value='',formid=0,fields=$("#fields").val(),formeditor='';
    
    
                if( typeof type!=='undefined' ){
                    type_value = type;
                }
                console.log(document.getElementById("formType"));
                //获取表单设计器里的内容
                formeditor=leipiEditor.getContent();
                //解析表单设计器控件
                var parse_form = this.parse_form(formeditor,fields);
                 //异步提交数据
                 $.ajax({
                    type: 'POST',
                    url : '/webFormTest/addForm.do',
                    dataType : 'html',
                    async:false,
                    //contentType: 'application/json;charset=utf-8',
                    data : {'type' : type_value,'formid':formid,'parse_form':parse_form,"formType":formType},      
                    success : function(data){
                    	alert("保存成功");
                    	window.location.href ="./my_views/formList.html";
                    }
                });
                
            } else {
                alert('表单内容不能为空!')
                $('#submitbtn').button('reset');
                return false;
            }
        } ,
        /*预览表单*/
        fnReview : function (){
            if(leipiEditor.queryCommandState( 'source' ))
                leipiEditor.execCommand('source');/*切换到编辑模式才提交,否则部分浏览器有bug*/
            if(leipiEditor.hasContents()){
                leipiEditor.sync();       /*同步内容*/
                //--------------以下仅参考-------------------------------------------------------------------
                /*设计form的target 然后提交至一个新的窗口进行预览*/
                var type_value='',formid=0,fields=$("#fields").val(),formeditor='';
                var formType=document.getElementById("formType").value;
                if( typeof type!=='undefined' ){
                    type_value = type;
                }
                //获取表单设计器里的内容
                formeditor=leipiEditor.getContent();
                //解析表单设计器控件
                var parse_form = this.parse_form(formeditor,fields);
                var forms=JSON.parse(parse_form);
                console.log(forms);
                console.log(typeof forms);
                console.log(forms.template);
                var forms1=forms.template;
                	win_parse=window.open('','','width=800,height=400,alwaysRaised=yes,top=100,left=200');
                	//win_parse=window.open('','mywin',"menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" +(screen.availWidth-10) + ",height=" + (screen.availHeight-50) + "\"");
                	var str='<div style="width:500px;height:300px;border:1px solid grey">'+forms1+'</div>';
                    win_parse.document.write(forms1);
                    win_parse.focus();     
            } else {
                alert('表单内容不能为空!');
                return false;
            }
        }
    };


    那么这里需要着重说明的就是js文件,在原文件中大家可以看到js也是写在html中的,最重要的是到了保存和预览的时候,都变了请用户自已处理:
    alert("你点击了保存,这里可以异步提交,请自行处理....");
    alert("你点击了预览,请自行处理....");

    于是我在对插件封装的数据进行了一定分析后就自行解决了这两个问题,也就是主要修改的地方。


    二、前台表单创建、预览完毕,要能实现以后都随时调用的功能,自然就需要存储到数据库中,前台似乎也能直接操作数据库,但是我本身是做后台的,因此就直接用了后台和数据库交互。

    后太也分别创建了model实体类、控制层controller、接口service、接口实现类serviceImp。因为这次主要是实现前台功能,我就把重心放在了前台,所以后台没有dao层。
    原本我是连service都不准备建立的,只是后来为了测试方便,还是建立了,因此各层看起来其实很混乱,该写在service的代码写在了controller,依次类推。
    代码分别如下:


    (1)、controller层,对前台传入的字符串进行了一定处理:

     

    package formControllers;
    import java.util.Map;
    import javax.servlet.http.HttpServletRequest;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    import services.FormService;
    
    
    @Controller
    public class FormController {
    	@Autowired
    	FormService formService;
    
    
    	@RequestMapping(value = "/addForm.do", method = RequestMethod.POST)
    	@ResponseBody
    	public Object addForm(HttpServletRequest request) {
    		// String type_value = request.getParameter("type_value");
    		// String formid = request.getParameter("formid");
    		String parse_form = request.getParameter("parse_form");
    		String formType = request.getParameter("formType");
    		System.out.println(formType);
    		int index1 = parse_form.indexOf("\"template\":");
    		int index2 = parse_form.indexOf("\"parse\":");
    		String string = parse_form.substring(index1 + 12, index2 - 6);
    		string = string.replace("\\", "");
    		string = string.replace("{", "");
    		string = string.replace("}", "");
    		string = string.replace("|", "");
    		string = string.replace("-", "");
    		formService.addForm(formType, string);
    		return string;
    	}
    }
    

     

     

    (2)、service层存入数据库:

     

     

     

    Service:
    package services;
    import java.util.Map;
    
    
    public interface FormService {
    	public Object addForm(String formType, String string);
    }

     


    serviceImp代码:

     

     

    package servicesImp;
    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.Statement;
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.Map;
    import org.springframework.stereotype.Service;
    import services.FormService;
    @Service("FormService")
    public class FormServiceImp implements FormService {
    
    
    	/**
    	 * 新增表单
    	 * 
    	 * @author:tuzongxun
    	 * @Title: addForm
    	 * @Description: TODO
    	 * @param @param formType
    	 * @param @param string
    	 * @param @return
    	 * @date Mar 28, 2016 4:30:18 PM
    	 * @throws
    	 */
    	public Object addForm(String formType, String string) {
    		System.out.println(string);
    		try {
    			Connection connection = this.getDb();
    			PreparedStatement ps = connection
    					.prepareStatement("insert into  formtest(formId,formType,form) values(?,?,?)");
    			String formId = new Date().getTime() + "";
    			ps.setString(1, formId);
    			ps.setString(2, formType);
    			ps.setString(3, string);
    			ps.executeUpdate();
    			connection.close();
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		return string;
    	}
    
    
    	public Connection getDb() {
    		Connection connection = null;
    		try {
    			Class.forName("com.mysql.jdbc.Driver");
    			connection = DriverManager.getConnection(
    					"jdbc:mysql://localhost:3306/formtest", "root", "123456");
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		return connection;
    	}
    /**链接数据库*/<p align="left"><strong><span style="color:#7F0055;">public</span></strong> Connection getDb() {</p><p align="left">       Connection <span style="color:#6A3E3E;">connection</span> = <strong><span style="color:#7F0055;">null</span></strong>;</p><p align="left">       <strong><span style="color:#7F0055;">try</span></strong> {</p><p align="left">           Class.<em>forName</em>(<span style="color:#2A00FF;">"com.mysql.jdbc.Driver"</span>);</p><p align="left">           <span style="color:#6A3E3E;">connection</span> = DriverManager.<em>getConnection</em>(</p><p align="left">                  <span style="color:#2A00FF;">"jdbc:mysql://localhost:3306/formtest"</span>, <span style="color:#2A00FF;">"root"</span>, <span style="color:#2A00FF;">"123456"</span>);</p><p align="left">       } <strong><span style="color:#7F0055;">catch</span></strong> (Exception <span style="color:#6A3E3E;">e</span>) {</p><p align="left">           <span style="color:#6A3E3E;">e</span>.printStackTrace();</p><p align="left">       }</p><p align="left">       <strong><span style="color:#7F0055;">return</span></strong> <span style="color:#6A3E3E;">connection</span>;</p><p align="left">    }</p><p align="left"> }</p>

     

     

     


    Model实体:

     

     

     

     

     

    package models;
    public class FormModel {
    	// 'type' : type_value,'formid':formid,'parse_form':parse_form
    	private String formId;
    	private String type;
    	private Integer formid;
    	private String parse_form;
    	private String formType;
    
    
    	public String getType() {
    		return type;
    	}
    
    
    	public void setType(String type) {
    		this.type = type;
    	}
    
    
    	public int getFormid() {
    		return formid;
    	}
    
    
    	public String getParse_form() {
    		return parse_form;
    	}
    
    
    	public void setFormid(Integer formid) {
    		this.formid = formid;
    	}
    
    
    	public void setParse_form(String parse_form) {
    		this.parse_form = parse_form;
    	}
    
    
    	public String getFormType() {
    		return formType;
    	}
    
    
    	public void setFormType(String formType) {
    		this.formType = formType;
    	}
    
    
    	public String getFormId() {
    		return formId;
    	}
    
    
    	public void setFormId(String formId) {
    		this.formId = formId;
    	}
    
    
    	@Override
    	public String toString() {
    		return "FormModel [formId=" + formId + ", type=" + type + ", formid="
    				+ formid + ", parse_form=" + parse_form + ", formType="
    				+ formType + "]";
    	}
    
    
    }

     

    页面效果如图:

     

     

     

    原文index.html文件代码:

     

    <!DOCTYPE HTML>
    <html>
     <head>
        
        <title>WEB表单设计器 Ueditor Formdesign Plugins -leipi.org</title>
            <meta name="keyword" content="ueditor Formdesign plugins,formdesigner,ueditor扩展,web表单设计器,高级表单设计器,Leipi Form Design,web form设计器,web form designer,javascript jquery ueditor php表单设计器,formbuilder">
            <meta name="description" content="Ueditor Web Formdesign Plugins 扩展即WEB表单设计器扩展,它通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用,你可以在此基础上任意修改使功能无限强大!">
    
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="author" content="leipi.org">
        <link href="css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />
        <!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap-ie6.css?2023">
        <![endif]-->
        <!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="css/bootstrap/css/ie.css?2023">
        <![endif]-->
        <link href="css/site.css?2023" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            var _root='http://form/index.php?s=/',_controller = 'index';
        </script>
        
    <!--style>
        .list-group-item{padding:0px;}
    </style-->
    
    
     </head>
    <body>
    
    
    <!-- fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="http://www.leipi.org" target="_blank">雷劈网</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="active"><a href="/">表单设计器</a></li>
                <li ><a href="http://formdesign.leipi.org/doc.html">文档</a></li>
                <li ><a href="http://formdesign.leipi.org/demo.html">实例</a></li>
                <li ><a href="http://formdesign.leipi.org/downloads.html">下载</a></li>
                <li ><a href="http://formdesign.leipi.org/feedback.html">公开讨论</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    
    
    
        
    
    
    
    
    <!-- Docs page layout -->
    <div class="bs-header" id="content">
      <div class="container">
    
    
        <h1><img src="js/ueditor/formdesign/images/leipi_formdesign.png" width="64"/>WEB表单设计器 <small>Ueditor1.4.2 + Formdesign4.1.x</small></h1>
        <p>
            感谢大家使用,如有任何意见或建议,请务必告知,<a href="#bs-footer">免责声明</a>。
            <p>
            复制分享:<input type="text" value="大家都在用雷劈网WEB表单设计器,你去官网看看 http://formdesign.leipi.org/" style="width:80%" onclick="this.select()"/>
            </p>
            交流Q群: 143263697
        </p>
        
      </div>
    </div>
    
    
    
    
    <div class="container">
    <form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html">
    <input type="hidden" name="fields" id="fields" value="0">
    <div class="row">
    
    
        <div class="well well-small">
    <span class="pull-right">
        <a href="http://formdesign.leipi.org/demo.html" class="btn btn-success btn-small">使用实例演示</a>
    </span>
    
    
    <p>
     一栏布局:<br /><br />
            <button type="button" onclick="leipiFormDesign.exec('text');" class="btn btn-info">文本框</button>
            <button type="button" onclick="leipiFormDesign.exec('textarea');" class="btn btn-info">多行文本</button>
            <button type="button" onclick="leipiFormDesign.exec('select');" class="btn btn-info">下拉菜单</button>
            <button type="button" onclick="leipiFormDesign.exec('radios');" class="btn btn-info">单选框</button>
            <button type="button" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-info">复选框</button>
            <button type="button" onclick="leipiFormDesign.exec('macros');" class="btn btn-info">宏控件</button>
            <button type="button" onclick="leipiFormDesign.exec('progressbar');" class="btn btn-info">进度条</button>
            <button type="button" onclick="leipiFormDesign.exec('qrcode');" class="btn btn-info">二维码</button>
            <button type="button" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-info">列表控件</button>
            <button type="button" onclick="leipiFormDesign.exec('more');" class="btn btn-primary">一起参与...</button>
    </p>
         </div>
         
    </div>
    
    
    
    
    <div class="alert">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>提醒:</strong>单选框和复选框,如:<code>{|-</code>选项<code>-|}</code>两边边界是防止误删除控件,程序会把它们替换为空,请不要手动删除!
    </div>
    
    
    
    
    <div class="row">
    
    
    <div class="span2">
    <ul class="nav nav-list">
        <li class="nav-header">两栏布局</li>
        <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('text');" class="btn btn-link">文本框</a></li>
        <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('textarea');" class="btn btn-link">多行文本</a></li>
        <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('select');" class="btn btn-link">下拉菜单</a></li>
        <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('radios');" class="btn btn-link">单选框</a></li>
        <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-link">复选框</a></li>
        <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('macros');" class="btn btn-link">宏控件</a></li>
        <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('progressbar');" class="btn btn-link">进度条</a></li>
        <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('qrcode');" class="btn btn-link">二维码</a></li>
        <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-link">列表控件</a></li>
        <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('more');" class="btn btn-link">一起参与...</a></li>
        
    </ul>
    
    
    </div>
    
    
    <div class="span10">
    
    
    <script id="myFormDesign" type="text/plain" style="width:100%;">
    <p style="text-align: center;">
        <br/>
    </p>
    <p style="text-align: center;">
        <span style="font-size: 24px;">示例表</span>
    </p>
    <table class="table table-bordered">
        <tbody>
            <tr class="firstRow">
                <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">
                    文本框
                </td>
                <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="227">
                    <input style="text-align: left; width: 150px;" title="文本框" value="雷劈网" name="leipiNewField" orgheight="" orgwidth="150" orgalign="left" orgfontsize="" orghide="0" leipiplugins="text" orgtype="text"/>
                </td>
                <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">
                    下拉菜单
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221);" width="312">
                    {|-<span leipiplugins="select"><select name="leipiNewField" title="下拉菜单" leipiplugins="select" size="1" orgwidth="150" style="width: 150px;"><option value="下拉">
                        下拉
                    </option>
                    <option value="菜单">
                        菜单
                    </option></select>  </span>-|}
                </td>
            </tr>
            <tr>
                <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">
                    单选
                </td>
                <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="41">
    {|-<span leipiplugins="radios"  title="单选" name="leipiNewField">
        <input  value="单选1"   type="radio" checked="checked"/>单选1 
        <input  value="单选2"  type="radio"/>单选2 
    </span>-|}
                </td>
                <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">
                    复选
                </td>
                <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="312">
                    {|-<span leipiplugins="checkboxs" title="复选">
                        <input name="leipiNewField" value="复选1"  type="checkbox" checked="checked"/>复选1 
                        <input name="leipiNewField" value="复选2"  type="checkbox" checked="checked"/>复选2 
                        <input name="leipiNewField" value="复选3"  type="checkbox"/>复选3 
                        </span>-|}
                </td>
            </tr>
            <tr>
                <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">
                    宏控件
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221);" width="41">
                    <input name="leipiNewField" type="text" value="{macros}" title="宏控件" leipiplugins="macros" orgtype="sys_date_cn" orghide="0" orgfontsize="12" orgwidth="150" style="font-size: 12px; width: 150px;"/>
                </td>
                <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">
                    二维码
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221);" width="312">
                    <img name="leipiNewField" title="雷劈网" value="http://www.leipi.org" orgtype="url" leipiplugins="qrcode" src="js/ueditor/formdesign/images/qrcode.gif" orgwidth="40" orgheight="40" style="width: 40px; height: 40px;"/>
                </td>
            </tr>
        </tbody>
    </table>
    <p>
        <input name="leipiNewField" leipiplugins="listctrl" type="text" value="{列表控件}" readonly="readonly" title="采购商品列表" orgtitle="商品名称`数量`单价`小计`描述`" orgcoltype="text`int`int`int`text`" orgunit="```元``" orgsum="0`0`0`1`0`" orgcolvalue="`````" orgwidth="100%" style="width: 100%;"/>
    </p>
    <p>
        <textarea title="多行文本" name="leipiNewField" leipiplugins="textarea" value="" orgrich="0" orgfontsize="12" orgwidth="600" orgheight="80" style="font-size:12px;width:600px;height:80px;"></textarea>
    </p>
    <p>
        <img name="leipiNewField" title="进度条" leipiplugins="progressbar" orgvalue="20" orgsigntype="progress-info" src="js/ueditor/formdesign/images/progressbar.gif"/>
    </p>
    </script>
    </div>
    
    
    
    
    
    
    </div><!--end row-->
    
    
    </form>
    
    
    
    
    
    
    </div><!--end container-->
    
    
    
    
     
    
    
        
     <div class="bs-footer" role="contentinfo" id="bs-footer">
          <div class="container">
              <p><span class="glyphicon glyphicon-list-alt"></span> 免责声明:本站仅分享开发思路和示例代码并且乐于交流和促进网络良性发展,是非商业工具,如有疑问请加群或邮件告知,积极配合调整。</p>
              <p><span class="glyphicon glyphicon-list-alt"></span> 反馈:payonesmile@qq.com</p>
              <p><span class="glyphicon glyphicon-usd"></span> 支持:捐赠支付宝 payonesmile@qq.com 、<a href="#">捐赠记录</a></p>
              <p><span class="glyphicon glyphicon-bookmark"></span> 鸣谢:<a href="http://ueditor.baidu.com" target="_balnk">UEditor</a>、<a href="https://github.com/twbs/bootstrap/" target="_balnk">Bootstrap</a>、<a href="http://www.leipi.org" target="_balnk">雷劈网</a></p>
              <p><a href="http://www.leipi.org" title="雷劈网"><img src="http://www.leipi.org/wp-content/themes/leipi/images/leipi.png" alt="雷劈认证 icon" height="30"></a> &copy;2014 Ueditor Formdesign Plugins v4 leipi.org <a href="http://www.miitbeian.gov.cn/" target="_blank">粤ICP备13051130号</a></p>
          </div>
    </div>
        
    
    
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js?2023"></script>
    
    
    <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js?2023"></script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.js?2023"> </script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/lang/zh-cn/zh-cn.js?2023"></script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/formdesign/leipi.formdesign.v4.js?2023"></script>
    <!-- script start-->  
    <script type="text/javascript">
    var leipiEditor = UE.getEditor('myFormDesign',{
                //allowDivTransToP: false,//阻止转换div 为p
                toolleipi:true,//是否显示,设计器的 toolbars
                textarea: 'design_content',   
                //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
               toolbars:[[
                'fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', 'fontborder', 'strikethrough',  'removeformat', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','|', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',  'link', 'unlink',  '|',  'horizontal',  'spechars',  'wordimage', '|', 'inserttable', 'deletetable',  'mergecells',  'splittocells']],
                //focus时自动清空初始化时的内容
                //autoClearinitialContent:true,
                //关闭字数统计
                wordCount:false,
                //关闭elementPath
                elementPathEnabled:false,
                //默认的编辑区域高度
                initialFrameHeight:300
                //,iframeCssUrl:"css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你网站css
                //更多其他参数,请参考ueditor.config.js中的配置项
            });
    
    
     var leipiFormDesign = {
        /*执行控件*/
        exec : function (method) {
            leipiEditor.execCommand(method);
        },
        /*
            Javascript 解析表单
            template 表单设计器里的Html内容
            fields 字段总数
        */
       parse_form:function(template,fields)
        {
            //正则  radios|checkboxs|select 匹配的边界 |--|  因为当使用 {} 时js报错
            var preg =  /(\|-<span(((?!<span).)*leipiplugins=\"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi,preg_attr =/(\w+)=\"(.?|.+?)\"/gi,preg_group =/<input.*?\/>/gi;
            if(!fields) fields = 0;
    
    
            var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0;
    
    
            var pno = 0;
            template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){
                var parse_attr = new Array(),attr_arr_all = new Object(),name = '', select_dot = '' , is_new=false;
                var p0 = plugin;
                var tag = p6 ? p6 : p4;
                //alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6);
    
    
                if(tag == 'radios' || tag == 'checkboxs')
                {
                    plugin = p2;
                }else if(tag == 'select')
                {
                    plugin = plugin.replace('|-','');
                    plugin = plugin.replace('-|','');
                }
                plugin.replace(preg_attr, function(str0,attr,val) {
                        if(attr=='name')
                        {
                            if(val=='leipiNewField')
                            {
                                is_new=true;
                                fields++;
                                val = 'data_'+fields;
                            }
                            name = val;
                        }
                        
                        if(tag=='select' && attr=='value')
                        {
                            if(!attr_arr_all[attr]) attr_arr_all[attr] = '';
                            attr_arr_all[attr] += select_dot + val;
                            select_dot = ',';
                        }else
                        {
                            attr_arr_all[attr] = val;
                        }
                        var oField = new Object();
                        oField[attr] = val;
                        parse_attr.push(oField);
                }) 
                /*alert(JSON.stringify(parse_attr));return;*/
                 if(tag =='checkboxs') /*复选组  多个字段 */
                 {
                    plugin = p0;
                    plugin = plugin.replace('|-','');
                    plugin = plugin.replace('-|','');
                    var name = 'checkboxs_'+checkboxs;
                    attr_arr_all['parse_name'] = name;
                    attr_arr_all['name'] = '';
                    attr_arr_all['value'] = '';
                    
                    attr_arr_all['content'] = '<span leipiplugins="checkboxs"  title="'+attr_arr_all['title']+'">';
                    var dot_name ='', dot_value = '';
                    p5.replace(preg_group, function(parse_group) {
                        var is_new=false,option = new Object();
                        parse_group.replace(preg_attr, function(str0,k,val) {
                            if(k=='name')
                            {
                                if(val=='leipiNewField')
                                {
                                    is_new=true;
                                    fields++;
                                    val = 'data_'+fields;
                                }
    
    
                                attr_arr_all['name'] += dot_name + val;
                                dot_name = ',';
    
    
                            }
                            else if(k=='value')
                            {
                                attr_arr_all['value'] += dot_value + val;
                                dot_value = ',';
    
    
                            }
                            option[k] = val;    
                        });
                        
                        if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();
                        attr_arr_all['options'].push(option);
                        //if(!option['checked']) option['checked'] = '';
                        var checked = option['checked'] !=undefined ? 'checked="checked"' : '';
                        attr_arr_all['content'] +='<input type="checkbox" name="'+option['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';
    
    
                        if(is_new)
                        {
                            var arr = new Object();
                            arr['name'] = option['name'];
                            arr['leipiplugins'] = attr_arr_all['leipiplugins'];
                            add_fields[option['name']] = arr;
    
    
                        }
    
    
                    });
                    attr_arr_all['content'] += '</span>';
    
    
                    //parse
                    template = template.replace(plugin,attr_arr_all['content']);
                    template_parse = template_parse.replace(plugin,'{'+name+'}');
                    template_parse = template_parse.replace('{|-','');
                    template_parse = template_parse.replace('-|}','');
                    template_data[pno] = attr_arr_all;
                    checkboxs++;
    
    
                 }else if(name)
                {
                    if(tag =='radios') /*单选组  一个字段*/
                    {
                        plugin = p0;
                        plugin = plugin.replace('|-','');
                        plugin = plugin.replace('-|','');
                        attr_arr_all['value'] = '';
                        attr_arr_all['content'] = '<span leipiplugins="radios" name="'+attr_arr_all['name']+'" title="'+attr_arr_all['title']+'">';
                        var dot='';
                        p5.replace(preg_group, function(parse_group) {
                            var option = new Object();
                            parse_group.replace(preg_attr, function(str0,k,val) {
                                if(k=='value')
                                {
                                    attr_arr_all['value'] += dot + val;
                                    dot = ',';
                                }
                                option[k] = val;    
                            });
                            option['name'] = attr_arr_all['name'];
                            if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();
                            attr_arr_all['options'].push(option);
                            //if(!option['checked']) option['checked'] = '';
                            var checked = option['checked'] !=undefined ? 'checked="checked"' : '';
                            attr_arr_all['content'] +='<input type="radio" name="'+attr_arr_all['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';
    
    
                        });
                        attr_arr_all['content'] += '</span>';
    
    
                    }else
                    {
                        attr_arr_all['content'] = is_new ? plugin.replace(/leipiNewField/,name) : plugin;
                    }
                    //attr_arr_all['itemid'] = fields;
                    //attr_arr_all['tag'] = tag;
                    template = template.replace(plugin,attr_arr_all['content']);
                    template_parse = template_parse.replace(plugin,'{'+name+'}');
                    template_parse = template_parse.replace('{|-','');
                    template_parse = template_parse.replace('-|}','');
                    if(is_new)
                    {
                        var arr = new Object();
                        arr['name'] = name;
                        arr['leipiplugins'] = attr_arr_all['leipiplugins'];
                        add_fields[arr['name']] = arr;
                    }
                    template_data[pno] = attr_arr_all;
    
    
                   
                }
                pno++;
            })
            var parse_form = new Object({
                'fields':fields,//总字段数
                'template':template,//完整html
                'parse':template_parse,//控件替换为{data_1}的html
                'data':template_data,//控件属性
                'add_fields':add_fields//新增控件
            });
            return JSON.stringify(parse_form);
        },
        /*type  =  save 保存设计 versions 保存版本  close关闭 */
        fnCheckForm : function ( type ) {
            if(leipiEditor.queryCommandState( 'source' ))
                leipiEditor.execCommand('source');//切换到编辑模式才提交,否则有bug
                
            if(leipiEditor.hasContents()){
                leipiEditor.sync();/*同步内容*/
                
                alert("你点击了保存,这里可以异步提交,请自行处理....");
                return false;
                //--------------以下仅参考-----------------------------------------------------------------------------------------------------
                var type_value='',formid=0,fields=$("#fields").val(),formeditor='';
    
    
                if( typeof type!=='undefined' ){
                    type_value = type;
                }
                //获取表单设计器里的内容
                formeditor=leipiEditor.getContent();
                //解析表单设计器控件
                var parse_form = this.parse_form(formeditor,fields);
                //alert(parse_form);
                
                 //异步提交数据
                 $.ajax({
                    type: 'POST',
                    url : '/index.php?s=/index/parse.html',
                    //dataType : 'json',
                    data : {'type' : type_value,'formid':formid,'parse_form':parse_form},
                    success : function(data){
                        if(confirm('查看js解析后,提交到服务器的数据,请临时允许弹窗'))
                        {
                            win_parse=window.open('','','width=800,height=600');
                            //这里临时查看,所以替换一下,实际情况下不需要替换  
                            data  = data.replace(/<\/+textarea/,'<textarea');
                            win_parse.document.write('<textarea style="width:100%;height:100%">'+data+'</textarea>');
                            win_parse.focus();
                        }
                        
                        /*
                      if(data.success==1){
                          alert('保存成功');
                          $('#submitbtn').button('reset');
                      }else{
                          alert('保存失败!');
                      }*/
                    }
                });
                
            } else {
                alert('表单内容不能为空!')
                $('#submitbtn').button('reset');
                return false;
            }
        } ,
        /*预览表单*/
        fnReview : function (){
            if(leipiEditor.queryCommandState( 'source' ))
                leipiEditor.execCommand('source');/*切换到编辑模式才提交,否则部分浏览器有bug*/
                
            if(leipiEditor.hasContents()){
                leipiEditor.sync();       /*同步内容*/
                
                 alert("你点击了预览,请自行处理....");
                return false;
                //--------------以下仅参考-------------------------------------------------------------------
    
    
    
    
                /*设计form的target 然后提交至一个新的窗口进行预览*/
                document.saveform.target="mywin";
                window.open('','mywin',"menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" +(screen.availWidth-10) + ",height=" + (screen.availHeight-50) + "\"");
    
    
                document.saveform.action="/index.php?s=/index/preview.html";
                document.saveform.submit(); //提交表单
            } else {
                alert('表单内容不能为空!');
                return false;
            }
        }
    };
    
    
    </script>
    <!-- script end -->
    
    
    
    
    <!-这个div已经被我删除-
    <div style="display: none;">                                                                   
    88888888888  88                             ad88  88                ad88888ba   8888888888   
    88           ""                            d8"    88               d8"     "88  88           
    88                                         88     88               8P       88  88  ____     
    88aaaaa      88  8b,dPPYba,   ,adPPYba,  MM88MMM  88  8b       d8  Y8,    ,d88  88a8PPPP8b,  
    88"""""      88  88P'   "Y8  a8P_____88    88     88  `8b     d8'   "PPPPPP"88  PP"     `8b  
    88           88  88          8PP"""""""    88     88   `8b   d8'            8P           d8  
    88           88  88          "8b,   ,aa    88     88    `8b,d8'    8b,    a8P   Y8a     a8P  
    88           88  88           `"Ybbd8"'    88     88      Y88'     `"Y8888P'     "Y88888P"   
                                                              d8'                                
    2014-3-15 Firefly95、Ard、xinG、Xiaoyaodaya               d8'  
    </div>
    <div style="width:1px;height:1px">
      <script type="text/javascript">
      var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
      document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F1e6fd3a46a5046661159c6bf55aad1cf' type='text/javascript'%3E%3C/script%3E"));
      </script>
    </div>
    </body>
    </html>
    

     

     

     

     

     

    展开全文
  • 创建表单web页

    2015-04-05 18:33:40
    html创建表单web页
    <html>
    <head>
     <title>表单web页</title>
    </head>
    <body>
    <form action="" method="post">
    <!--输入文本框,size表示显示的长度,maxlength表示最多显示长度 -->
    编  号:<input type="text" name="userid" value="NO." size="2" maxlength="2" /><br />
    <!-- 输入的文本框,通过value指定其显示的默认值 -->
    用户名:<input type="text" name="username" value="请输入用户名" /><br />
    <!-- 密码框,所有输入的内容都以密文形式出现-->
    密  码:<input type="password" name="userpass" value="请输入密码" /><br />
    性  别:<input type="radio" name="sex" value="男" checked />男
    				  <input type="radio" name="sex" value="女" />女<br />
    部  门:<select name="dept">
    						<option value="技术部">技术部</option>
    						<option value="销售部"SELECTED>销售部</option>
    						<option value="财务部">财务部</option>
    				   </select><br />
    兴  趣:
    				   <input type="checkbox" name="inst" value="唱歌" />唱歌
    				   <input type="checkbox" name="inst" value="游泳" />游泳
    				   <input type="checkbox" name="inst" value="跳舞" />跳舞
    				   <input type="checkbox" name="inst" value="编程" checked/>编程
    				   <input type="checkbox" name="inst" value="上网" />上网<br />
    <!--大文本输入框30x3 -->
    说  明:<textarea name="note" cols="30" rows="3">
    我爱编程
    	</textarea><br />
    	<!-- 提交表单和重置表单-->
    	<input type="submit" value="注册" /><input type="reset" value="重置" />
    	</form>												<!--表单结束-->
    </body>
    </html>

    展开全文
  • 它可以很方便的创建表单,分享出去,主要用于一些信息收集的工作。 由于搜出来的官方教程过于陈旧,界面基本和现在不一样了,小能手经过了一番摸索后,终于搞定。这篇笔记做个实践记录。 本文作者twow...
  • 本系列文章之前有介绍如何创建应用,以及表单的基本概念,那么本文主要介绍如何在搭搭云系统中创建表单。 正文: 之前我们说了我们可以把搭搭云创建的应用想象成一个数据库,如果数据库搭建好了,那么接下来的自然...
  • WinForm 自动创建表单

    2009-04-17 12:39:42
    自己实现的一个自动创建表单控件,包含控件源码和 示例源码。 用此控件需要为属性TableModel赋值,详细见示例。 根据数据库的数据类型,长度,创建表单(不支持二进制类型)。并可以把数据保存到数据库(添加、...
  • 从模型创建表单ModelForm

    千次阅读 2017-11-02 09:06:11
    从模型创建表单 ModelForm¶ class ModelForm¶ 如果你正在构建一个数据库驱动的应用,那么你应该会有与Django 的模型紧密映射的表单。举个例子,你也许会有个BlogComment 模型,并且你还想创建一个...
  • 上海电子信息职业技术学院 通信与信息工程学院软件技术系 网页制作课程任务单 姓 名 学 号 班级 成绩 学习情景编号 11 学习情景名称 在HTML文档中创建表单 学时 2 任务要求 在公司网站子页HTML文档中创建表单 训练...
  • java server face动态创建表单控件实例
  • jQuery动态创建表单并提交

    千次阅读 2016-08-25 10:46:32
    jQuery动态创建表单并提交
  • vue.js 表单 ?... 在Vue.js中轻松创建表单 ???? support working: ???? support working: input, textarea, switch, select, colorpick 输入,文本区域,开关,选择,颜色选择 ???? next ???? next...
  • //@创建表单方法 function post(URL, PARAMS) { var temp = document.createElement("form"); temp.action = URL; temp.method = "post"; temp.style.display = "none"; for (var x in PARAMS
  • js创建表单控件

    2011-05-10 17:34:00
    js创建表单控件 var btn=document.createElement("input"); 表单控件类型用 btn.setAttribute("type","text") 为什么不用btn.type="text"? 因 浏览器安全限制 这样不能写 转载于:...
  • 创建表单元素:文本框text,按钮 button <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="p1">创建表单项:文本,按钮 </p> <...
  • JS创建表单提交后台设置请求方式

    千次阅读 2016-08-19 11:39:34
    JS 创建表单并提交 用途:在界面上选择几千个订单,读取ID号提交到后台处理,有几种方法实现,$.ajax方法提交不能打开新窗口,form表单提交可能被其他功能占用。 创建表单并设置参数类型、提交方式等,可以实现 form...
  • 动态创建表单

    千次阅读 2018-02-07 09:08:21
    function deleteUser2(id){ var myform = document.createElement...//创建form节点 //添加action属性 myform.setAttribute("action", "${pageContext.request.contextPath}/userInfo/delete/"+id); myform.setAtt
  • Oracle 基础(2)——创建表单

    千次阅读 2017-09-04 18:55:38
    创建表单 oracle中的数据类型 number(n) 数字( 最长n位 ) number(n , m) 浮点数( 总长n为, 小数点后m位 ) char(n)表示定长字符串 varchar(n)表示变长字符串( 节省空间 )  varchar2(n)Oracle自己定义的...
  • 翻译自在JavaFX中创建表单 在开发应用程序时,创建表单是一项常见活动。本教程将向您介绍屏幕布局的基础知识,如何将控件添加到布局窗格以及如何创建输入事件。 在本教程中,您将使用JavaFX构建如图4-1所示的登录...
  • Flask创建表单

    千次阅读 2017-01-12 15:22:27
    使用flask提交表单的方式 1、前端html: {% extends "base.html" %} {% import "bootstrap/wtf.html" as wtf %} {% block title %}Flasky{% endblock %} {% block page_content %} Hello, {% if name %}{{ name ...
  • 数据库创建表单

    2017-11-23 16:23:00
    创建一个使用gbk字符集,并且带校对规则的mydb3数据库。 create database mydb3 character set gbk collate gbk_chinese_ci; 数据表: 格式: create table employee{ //创建表名字 id int, //定义id name ...
  • html创建表单元素

    千次阅读 2006-07-03 03:17:00
    创建表单使用元素,以及在期间插入的相关元素(组件),可以创建作为html文档一部分的表单语法 注意get方法提交表单是,提交的数据被附加导url上,作为url的一部分发送到服务器端Post 方法是将表单中的信息作为一个数据块...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,064
精华内容 7,225
关键字:

创建表单