深蓝计划（功能篇）-----表单构建器

最新推荐文章于 2024-07-27 17:44:01 发布
最新推荐文章于 2024-07-27 17:44:01 发布
阅读量1k 收藏
点赞数
分类专栏： 深蓝计划
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/52397693
版权

源码：

<!DOCTYPE html>
<!-- saved from url=(0048)http://www.bootcss.com/p/bootstrap-form-builder/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Bootstrap表单构造器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="基于Bootstrap的web表单构造器，通过拖拽组件的方式生成完整可用的表单">
    <meta name="keywords" content="Bootstrap,Form,表单,拖拽">
    <meta name="author" content="Bootstrap中文网">

    <link href="./表单生成器/bootstrap.min.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        padding-bottom: 10px;
      }
      #components{
        min-height: 600px;
      }
      #target{
        min-height: 200px;
        border: 1px solid #ccc;
        padding: 5px;
      }
      #target .component{
        border: 1px solid #fff;
      }
      #temp{
        width: 500px;
        background: white;
        border: 1px dotted #ccc;
        border-radius: 10px;
      }

      .popover-content form {
        margin: 0 auto;
        width: 213px;
      }
      .popover-content form .btn{
        margin-right: 10px
      }
      #source{
        min-height: 500px;
      }
    </style>
    <link href="./表单生成器/bootstrap-responsive.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link rel="shortcut icon" href="http://www.bootcss.com/p/bootstrap-form-builder/images/favicon.ico">
    <link rel="apple-touch-icon" href="http://www.bootcss.com/p/bootstrap-form-builder/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="http://www.bootcss.com/p/bootstrap-form-builder/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="http://www.bootcss.com/p/bootstrap-form-builder/images/apple-touch-icon-114x114.png">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a 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>
          </a>
          <a class="brand" href="./表单生成器/Bootstrap表单构造器.htm">Bootstrap 表单构造器</a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row clearfix">
        <div class="span6">
          <div class="clearfix">
            <h2>Your Form</h2>
            <hr>
            <div id="build">
              <form id="target" class="form-horizontal" style="background-color: rgb(255, 255, 255);">
                <fieldset>
                  <div id="legend" class="component" rel="popover" trigger="manual" data-content="
                    <form class='form'>
                      <div class='controls'>
                        <label class='control-label'>Title</label> <input class='input-large' type='text' name='title' id='text'>
                        <hr/>
                        <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                      </div>
                    </form>" data-original-title="Form Title" style="border-top-width: 1px; border-top-style: solid; border-top-color: white; border-bottom-style: none;">
                    <legend class="valtype" data-valtype="text">表单名</legend>
                  </div>
                <div class="control-group component" data-type="prep-text" rel="popover" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Prepend</label> <input type='text' name='prepend' id='prepend'>
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>" data-original-title="Prepended Text Input">

                      <!-- Prepended text-->
                      <label class="control-label valtype" data-valtype="label">Prepended text</label>
                      <div class="controls">
                        <div class="input-prepend">
                          <span class="add-on valtype" data-valtype="prepend">^_^</span>
                          <input class="span2 valtype" placeholder="placeholder" id="prependedInput" type="text" data-valtype="placeholder">
                        </div>
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p>
                      </div>

                    </div>

    </fieldset>
              </form>
            </div>
          </div>
        </div>

        <div class="span6">
            <h2>拖拽下面的组件到左侧</h2>
            <hr>
          <div class="tabbable">
            <ul class="nav nav-tabs" id="navtab">
              <li class="active"><a href="http://www.bootcss.com/p/bootstrap-form-builder/#1" data-toggle="tab">输入框</a></li>
              <li class=""><a href="http://www.bootcss.com/p/bootstrap-form-builder/#2" data-toggle="tab">Select</a></li>
              <li class=""><a href="http://www.bootcss.com/p/bootstrap-form-builder/#3" data-toggle="tab">Checkbox / Radio</a></li>
              <li class=""><a href="http://www.bootcss.com/p/bootstrap-form-builder/#4" data-toggle="tab">文件 / 按钮</a></li>
              <li class=""><a id="sourcetab" href="http://www.bootcss.com/p/bootstrap-form-builder/#5" data-toggle="tab">生成代码</a></li>
            </ul>
            <form class="form-horizontal" id="components">
              <fieldset>
                <div class="tab-content">

                  <div class="tab-pane active" id="1">

                    <div class="control-group component" data-type="text" rel="popover" title="Text Input" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">

                      <!-- Text input-->
                      <label class="control-label valtype" for="input01" data-valtype="label">Text input</label>
                      <div class="controls">
                        <input type="text" placeholder="placeholder" class="input-xlarge valtype" data-valtype="placeholder">
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p>
                      </div>
                    </div>


                    <div class="control-group component" data-type="search" rel="popover" title="Search Input" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">

                      <!-- Search input-->
                      <label class="control-label valtype" data-valtype="label">Search input</label>
                      <div class="controls">
                        <input type="text" placeholder="placeholder" class="input-xlarge search-query valtype" data-valtype="placeholder">
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p>
                      </div>

                    </div>


                    <div class="control-group component" data-type="prep-text" rel="popover" title="Prepended Text Input" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Prepend</label> <input type='text' name='prepend' id='prepend'>
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">

                      <!-- Prepended text-->
                      <label class="control-label valtype" data-valtype="label">Prepended text</label>
                      <div class="controls">
                        <div class="input-prepend">
                          <span class="add-on valtype" data-valtype="prepend">^_^</span>
                          <input class="span2 valtype" placeholder="placeholder" id="prependedInput" type="text" data-valtype="placeholder">
                        </div>
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p>
                      </div>

                    </div>

                    <div class="control-group component" data-type="app-text" rel="popover" title="Appended Text Input" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Appepend</label> <input type='text' name='append' id='append'>
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">

                      <!-- Appended input-->
                      <label class="control-label valtype" data-valtype="label">Appended text</label>
                      <div class="controls">
                        <div class="input-append">
                          <input class="span2 valtype" data-valtype="placeholder" placeholder="placeholder" type="text">
                          <span class="add-on valtype" data-valtype="append">^_^</span>
                        </div>
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p>
                      </div>

                    </div>

                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
                          <label class='checkbox'><input type='checkbox' class='input-inline' name='checked' id='checkbox'>Checked</label>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">

                      <!-- Prepended checkbox -->
                      <label class="control-label valtype" data-valtype="label">Prepended checkbox</label>
                      <div class="controls">
                        <div class="input-prepend">
                          <span class="add-on">
                            <label class="checkbox">
                              <input type="checkbox" class="valtype" data-valtype="checkbox">
                            </label>
                          </span>
                          <input class="span2 valtype" placeholder="placeholder" type="text" data-valtype="placeholder">
                        </div>
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p>
                      </div>

                    </div>

                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Placeholder</label> <input type='text' name='placeholder' id='placeholder'>
                          <label class='control-label'>Help Text</label> <input type='text' name='help' id='help'>
                          <label class='checkbox'><input type='checkbox' class='input-inline' name='checked' id='checkbox'>Checked</label>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">

                      <!-- Appended checkbox -->
                      <label class="control-label valtype" data-valtype="label">Append checkbox</label>
                      <div class="controls">
                        <div class="input-append">
                          <input class="span2 valtype" placeholder="placeholder" type="text" data-valtype="placeholder">
                          <span class="add-on">
                            <label class="checkbox" for="appendedCheckbox">
                              <input type="checkbox" class="valtype" data-valtype="checkbox">
                            </label>
                          </span>
                        </div>
                        <p class="help-block valtype" data-valtype="help">Supporting help text</p>
                      </div>
                    </div>

                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">

                      <!-- Textarea -->
                      <label class="control-label valtype" data-valtype="label">Textarea</label>
                      <div class="controls">
                        <div class="textarea">
                              <textarea type="" class="valtype" data-valtype="checkbox"> </textarea>
                        </div>
                      </div>
                    </div>

                  </div>

                  <div class="tab-pane" id="2">

                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Options: </label>
                          <textarea style='min-height: 200px' id='option'> </textarea>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">

                      <!-- Select Basic -->
                      <label class="control-label valtype" data-valtype="label">Select - Basic</label>
                      <div class="controls">
                        <select class="input-xlarge valtype" data-valtype="option">
                          <option>Enter</option>
                          <option>Your</option>
                          <option>Options</option>
                          <option>Here!</option>
                        </select>
                      </div>

                    </div>

                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Options: </label>
                          <textarea style='min-height: 200px' id='option'></textarea>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">

                      <!-- Select Multiple -->
                      <label class="control-label valtype" data-valtype="label">Select - Multiple</label>
                      <div class="controls">
                        <select class="input-xlarge valtype" multiple="multiple" data-valtype="option">
                          <option>Enter</option>
                          <option>Your</option>
                          <option>Options</option>
                          <option>Here!</option>
                        </select>
                      </div>
                    </div>

                  </div>

                  <div class="tab-pane" id="3">

                    <div class="control-group component" rel="popover" title="Multiple Checkboxes" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Options: </label>
                          <textarea style='min-height: 200px' id='checkboxes'> </textarea>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">
                      <label class="control-label valtype" data-valtype="label">Checkboxes</label>
                      <div class="controls valtype" data-valtype="checkboxes">

                        <!-- Multiple Checkboxes -->
                        <label class="checkbox">
                          <input type="checkbox" value="Option one">
                          Option one
                        </label>
                        <label class="checkbox">
                          <input type="checkbox" value="Option two">
                          Option two
                        </label>
                      </div>

                    </div>

                    <div class="control-group component" rel="popover" title="Multiple Radios" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Group Name Attribute</label> <input class='input-large' type='text' name='name' id='name'>
                          <label class='control-label'>Options: </label>
                          <textarea style='min-height: 200px' id='radios'></textarea>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">
                      <label class="control-label valtype" data-valtype="label">Radio buttons</label>
                      <div class="controls valtype" data-valtype="radios">

                        <!-- Multiple Radios -->
                        <label class="radio">
                          <input type="radio" value="Option one" name="group" checked="checked">
                          Option one
                        </label>
                        <label class="radio">
                          <input type="radio" value="Option two" name="group">
                          Option two
                        </label>
                      </div>

                    </div>

                    <div class="control-group component" rel="popover" title="Inline Checkboxes" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <textarea style='min-height: 200px' id='inline-checkboxes'></textarea>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">
                      <label class="control-label valtype" data-valtype="label">Inline Checkboxes</label>

                      <!-- Multiple Checkboxes -->
                      <div class="controls valtype" data-valtype="inline-checkboxes">
                        <label class="checkbox inline">
                          <input type="checkbox" value="1"> 1
                        </label>
                        <label class="checkbox inline">
                          <input type="checkbox" value="2"> 2
                        </label>
                        <label class="checkbox inline">
                          <input type="checkbox" value="3"> 3
                        </label>
                      </div>

                    </div>

                    <div class="control-group component" rel="popover" title="Inline radioes" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Group Name Attribute</label> <input class='input-large' type='text' name='name' id='name'>
                          <textarea style='min-height: 200px' id='inline-radios'></textarea>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">
                      <label class="control-label valtype" data-valtype="label">Inline radios</label>
                      <div class="controls valtype" data-valtype="inline-radios">

                        <!-- Inline Radios -->
                        <label class="radio inline">
                          <input type="radio" value="1" checked="checked" name="group">
                          1
                        </label>
                        <label class="radio inline">
                          <input type="radio" value="2" name="group">
                          2
                        </label>
                        <label class="radio inline">
                          <input type="radio" value="3">
                          3
                        </label>
                      </div>
                    </div>

                  </div>

                  <div class="tab-pane" id="4">
                    <div class="control-group component" rel="popover" title="File Upload" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">
                      <label class="control-label valtype" data-valtype="label">File Button</label>

                      <!-- File Upload -->
                      <div class="controls">
                        <input class="input-file" id="fileInput" type="file">
                      </div>
                    </div>

                    <div class="control-group component" rel="popover" title="Search Input" trigger="manual" data-content="
                      <form class='form'>
                        <div class='controls'>
                          <label class='control-label'>Label Text</label> <input class='input-large' type='text' name='label' id='label'>
                          <label class='control-label'>Button Text</label> <input class='input-large' type='text' name='label' id='button'>
                          <label class='control-label' id=''>Type: </label>
                          <select class='input' id='color'>
                            <option id='btn-default'>Default</option>
                            <option id='btn-primary'>Primary</option>
                            <option id='btn-info'>Info</option>
                            <option id='btn-success'>Success</option>
                            <option id='btn-warning'>Warning</option>
                            <option id='btn-danger'>Danger</option>
                            <option id='btn-inverse'>Inverse</option>
                          </select>
                          <hr/>
                          <button class='btn btn-info'>Save</button><button class='btn btn-danger'>Cancel</button>
                        </div>
                      </form>">
                      <label class="control-label valtype" data-valtype="label">Button</label>

                      <!-- Button -->
                      <div class="controls valtype" data-valtype="button">
                        <button class="btn btn-success">Button</button>
                      </div>
                    </div>
                  </div>


                  <div class="tab-pane" id="5">
                    <textarea id="source" class="span6"></textarea>
                  </div>
                </div></fieldset>
              </form>
            </div>
          </div> <!-- row -->
          <div class="row clearfix">
            <div class="span12">
              <hr>
              By Adam Moore (<a href="http://twitter.com/minikomi">@minikomi</a>).<br>
              Source on (<a href="http://github.com/minikomi">Github</a>).
              <p>Bootstrap 表单构造器由<a href="http://www.bootcss.com/">Bootstrap中文网</a>翻译整理</p>
            </div>
          </div>
        </div> <!-- /container -->
        <script src="./表单生成器/jquery.min.js"></script>
        <script src="./表单生成器/bootstrap.min.js"></script>

        <script src="./表单生成器/fb.js"></script>

    <script src="./表单生成器/projects.js"></script><script src="./表单生成器/h.js" type="text/javascript"></script><script src="./表单生成器/h(1).js" type="text/javascript"></script>
      
    
</div><div id="site-navbar" style="position: absolute; top: -4px; left: -3px; border: 0; z-index: 2000;padding:0;margin:0;"><a href="http://www.bootcss.com/" title="返回首页" style="background:none;"><img src="./表单生成器/return-back.png" style="padding:0;margin:0;border:0; -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;"></a></div></body></html>


资源文件：


效果展示：

表单构建器下载地址：http://download.csdn.net/detail/zhouzhiwengang/9618784

在奋斗的大道
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS+HTML版表单构造器(Fom Builder)适合Web系统使用
06-21
JS+HTML版表单构造器(Fom Builder)，适合Web系统使用，ASP.NET,JSP,PHP 在线构造，拖拉完成表单制作，立即生成HTML源代码，实时预览。
基于HTML+CSS+JS开发的网站-深蓝工业工厂响应式网页.7z
最新发布
07-29
实践案例：这些代码通常提供实际网站构建的示例，包括布局、交互和动态效果，有助于理解理论知识在现实项目中的应用。 技术栈覆盖：包含HTML5、CSS3和现代JavaScript（如ES6+），紧跟Web开发趋势，帮助学习者掌握...
Bootstrap（二）表单构造器
云桥落羽
10-04 1125
Bootstrap表单构造器 拖拽表单控件 设置控件属性 生成代码
Symfony 表单构建器：创建和管理表单的最佳实践
2401_85639015的博客
07-27 741
Symfony 的表单构建器提供了一套简洁且强大的 API，用于定义和处理表单。它支持多种表单类型、数据绑定、验证、数据转换和 CSRF 保护等功能。易于使用：通过简洁的 API，可以快速创建表单。可扩展性强：支持自定义表单类型和数据转换器。内置验证：与 Symfony 验证组件集成，提供强大的验证功能。数据绑定：自动处理表单数据的绑定和转换。可以使用表单字段的选项来定义验证规则。更推荐的做法是在实体类中定义验证规则，这样可以确保数据的一致性。
动态表单构建器——建造者模式
前端kk的博客
03-22 213
在编写一个弹出框时,它可以包含确定按钮，取消按钮，标题栏，关闭按钮，最小化按钮，内容，最大化按钮等内容，但这些内容在不同的需求下又不是必须存在的，不同的需求需要对这些组件自由组合，显然每次组合都要重复编码。将这些不同的，容易变动的组件分离开来，通过一个Builder类一步一步的构造复杂的对象，这就是建造者模式。 下面的例子是通过设计一个表单构造器来演示建造者模式。现在流行的Hybrid App的开发网络请求基本都是通过Ajax实现，设想一下如果应用要求根据不同的用户角色来提交不同的表单，...
应用开发平台集成表单设计器系列之4——表单构造器深度了解
学海无涯，行者无疆
03-18 1194
平台需要实现自定义表单功能，作为低代码开发的一部分，通过技术预研和技术选型，选择form-create和form-create-designer这两个组件进行集成作为实现方案。通过深入了解和技术验证，确认了组件的功能能满足需求，具备良好的开放性和扩展性。 上篇介绍了整体集成思路以及表单设计器的深入了解，接下来则是对表单构造器的深度了解。
Vue使用form-create-designer插件搭建表单构建器
热门推荐
ProChick's Blog
04-13 1万+
目录一、插件简介1.快速导航2.核心功能二、基础使用1.下载插件2.引入插件3.配置使用4.效果演示三、功能扩展1.下载插件2.引入插件3.配置使用4.效果演示 一、插件简介 form-create-designer 是基于 @form-create/element-ui 实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。 1.快速导航 插件地址：https://github.com/xaboy/form-create-designer 文档地址：ht
前端静态模板-响应式深蓝黑大气网站-学生作业毕设实训素材.zip
04-07
在这个模板中，JavaScript可能被用来实现导航菜单的展开与折叠、图片轮播、表单验证等功能。 6. **毕业设计**：对于学生来说，这个模板是一个很好的实践平台，可以用来完成毕业设计项目。通过实际操作，学生可以...
PHP实例开发源码-深蓝 PHP留言本.zip
11-23
在这个项目中，"深蓝 PHP留言本"是一个简单的Web应用程序，它允许用户在网站上留下他们的留言，同时提供了查看和管理留言的功能。这个实例涵盖了PHP基础和数据库交互的基础知识，是初学者了解PHP Web应用开发的良好...
深蓝色质感网站上线倒计时html模板-深蓝色 蓝色 质感 倒计时 上线 订阅.rar
02-21
这通常涉及到一个简单的表单设计，包括输入框和提交按钮，以及可能的验证机制，确保收集到的有效邮件地址。 "README.md"文件是压缩包中的另一个元素，通常包含有关模板的详细信息，如安装指南、使用方法、许可证...
flat-ui 2.2.2
11-30
Bootstrap提供了丰富的组件库，包括网格系统、表单、按钮、导航、模态对话框等，使开发者能够快速构建网页或应用程序的界面。 **三、核心组件** 1. **颜色方案**：Flat UI 2.2.2有一套独特的颜色搭配，如深蓝、...
bootstrap表单构造器
11-20
表单构建，基于bootstrap form上传，亲测可用，非常好用
form-builder:Web表单构建器
05-09
Web表单生成器 克隆存储库并移至项目目录 git clone https://github.com/randseay/draggable-forms.git && cd draggable-forms 安装全局和本地节点依赖项 npm install -g bower browserify gulp npm install 安装Bower依赖项 bower install 服务项目 gulp serve
formbuilder表单构建工具_在线表单设计器代码
11-24
formbuilder表单构建工具_在线表单设计器代码
表单构建器源码
05-17
bootstrap风格的表单构建器，可拖拽表单组件进行表单定制
Bootstrap表单构造器
weixin_34021089的博客
01-30 345
http://www.bootcss.com/p/bootstrap-form-builder/  
【开发者的福音】掌握表单构建的未来：Form.io表单构建器
gitblog_00089的博客
06-19 712
【开发者的福音】掌握表单构建的未来：Form.io表单构建器 项目地址:https://gitcode.com/formio/ngFormBuilder 在数字化时代，高效、灵活的表单解决方案是每个开发者梦寐以求的工具。今天，我们将深入探讨一款曾备受瞩目的开源宝藏——Form.io表单构建器，尽管该项目现已被其最新版本所替代（formio.js 和相关Angular库），但它的理念与技术价值仍值得...
php表单构建器,表格构建器（table）
weixin_39759890的博客
03-28 205
>[danger] 友情提示：构建器目前只支持HisiPHP Pro版本([我要升级](https://www.hisiphp.com/authorize.html))表格页面在后台管理开发中，使用频率最高，主要用于数据的展示和管理。## 如何使用HisiPHP内置的表格构建器同表单构建器一样的简单，无需引入任何类库，与TP的模板赋值方法一样赋值即可，页面渲染方法与TP完全一致。下面提供一段...
Django表单构建器：轻松创建定制化表单的利器
gitblog_00093的博客
05-10 278
Django表单构建器：轻松创建定制化表单的利器 django-forms-builderLet users build forms in Django admin项目地址:https://gitcode.com/gh_mirrors/dj/django-forms-builder Django表单构建器（django-forms-builder）是一个强大的开源应用程序，它允许站点管理员在后台...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值