formbuilder表單構建工具_在線表單設計器代碼



166 661 221



特效描述:表單構建工具 線表單設計器,formbuilder表單構建通過拖動表單元素構建表單代碼

代碼結構

1. 引入CSS

<link href="Public/css/bootstrap/css/bootstrap.css?2024" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="Public/css/bootstrap/css/bootstrap-ie6.css?2024">
<link rel="stylesheet" type="text/css" href="Public/css/bootstrap/css/ie.css?2024">
<link href="Public/css/site.css?2024" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" charset="utf-8" src="Public/js/jquery-1.7.2.min.js?2024"></script>
<script type="text/javascript"  src="Public/js/formbuild/bootstrap/js/bootstrap.min.js?2024"></script>
<script type="text/javascript" charset="utf-8" src="Public/js/formbuild/leipi.form.build.core.js?2024"></script>
<script type="text/javascript" charset="utf-8" src="Public/js/formbuild/leipi.form.build.plugins.js?2024"></script>

3. HTML代碼

<!-- Docs page layout -->
<div class="bs-header" id="content">
  <div class="container">
    <h1><img src="Public/js/formbuild/images/leipi_formbuild.png" width="64"/>拖拽式表單設計器 <small>Formbuild Leipi Org</small></h1>
    <p>
        <strong>拖拽式</strong> VS <strong>編輯器</strong><br/>VS:設計的表單是兼容的,但它們的樣式不同,拖拽式是傻瓜式排版而編輯器排版難度大一些但效果更好。
    <br/>
    交流Q群:143263697
    </p>
  </div>
</div>
<div class="container">
  <div class="row clearfix">
    <div class="span6">
      <div class="clearfix">
        <h2>我的表單</h2>
        <hr>
        <div id="build">
          <form id="target" class="form-horizontal">
            <fieldset>
              <div id="legend" class="component" rel="popover" title="編輯屬性" trigger="manual"
                data-content="
                <form class='form'>
                  <div class='controls'>
                    <label class='control-label'>表單名稱</label> <input type='text' id='orgvalue' placeholder='請輸入表單名稱'>
                    <hr/>
                    <button class='btn btn-info' type='button'>確定</button><button class='btn btn-danger' type='button'>取消</button>
                  </div>
                </form>"
                >
                <input type="hidden" name="form_name" value="" class="leipiplugins" leipiplugins="form_name"/>
                <legend class="leipiplugins-orgvalue">點擊填寫表單名</legend>
              </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="#1" data-toggle="tab">常用控件</a></li>
          <li class><a href="#2" data-toggle="tab">定制控件</a></li>
          <li class><a id="sourcetab" href="#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">
<!-- Text start -->
<div class="control-group component" rel="popover" title="文本框控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名稱</label> <input type='text' id='orgname' placeholder='必填項'>
      <label class='control-label'>默認值</label> <input type='text' id='orgvalue' placeholder='默認值'>
      <hr/>
      <button class='btn btn-info' type='button'>確定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <!-- Text -->
  <label class="control-label leipiplugins-orgname">文本框</label>
  <div class="controls">
    <input name="leipiNewField" type="text" placeholder="默認值" title="文本框" value="" class="leipiplugins" leipiplugins="text"/>
  </div>
</div>
<!-- Text end -->
<!-- Textarea start -->           
<div class="control-group component" rel="popover" title="多行文本控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名稱</label> <input type='text' id='orgname' placeholder='必填項'>
      <label class='control-label'>默認值</label> <input type='text' id='orgvalue' placeholder='默認值'>
      <hr/>
      <button class='btn btn-info' type='button'>確定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <!-- Textarea -->
  <label class="control-label leipiplugins-orgname">多行文本</label>
  <div class="controls">
    <div class="textarea">
          <textarea title="多行文本" name="leipiNewField" class="leipiplugins" leipiplugins="textarea"/> </textarea>
    </div>
  </div>
</div>
<!-- Textarea end -->
<!-- Select start -->
<div class="control-group component" rel="popover" title="下拉控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名稱</label> <input type='text' id='orgname' placeholder='必填項'>
      <label class='control-label'>下拉選項</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一個選項</p>
      <hr/>
      <button class='btn btn-info' type='button'>確定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <!-- Select -->
  <label class="control-label leipiplugins-orgname">下拉菜單</label>
  <div class="controls">
    <select name="leipiNewField" title="下拉菜單" class="leipiplugins" leipiplugins="select">
      <option>選項一</option>
      <option>選項二</option>
      <option>選項三</option>
    </select>
  </div>
</div>
<!-- Select end -->
<!-- Select start -->
<div class="control-group component" rel="popover" title="多選下拉控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名稱</label> <input type='text' id='orgname' placeholder='必填項'>
      <label class='control-label'>下拉選項</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一個選項</p>
      <hr/>
      <button class='btn btn-info' type='button'>確定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <!-- Select -->
  <label class="control-label leipiplugins-orgname">下拉菜單</label>
  <div class="controls">
    <select multiple="multiple" name="leipiNewField" title="下拉菜單" class="leipiplugins" leipiplugins="select">
      <option>選項一</option>
      <option>選項二</option>
      <option>選項三</option>
      <option>選項四</option>
    </select>
  </div>
</div>
<!-- Select end -->
<!-- Multiple Checkboxes start -->
<div class="control-group component" rel="popover" title="復選控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名稱</label> <input type='text' id='orgname' placeholder='必填項'>
      <label class='control-label'>復選框</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一個選項</p>
      <hr/>
      <button class='btn btn-info' type='button'>確定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <label class="control-label leipiplugins-orgname">復選框</label>
  <div class="controls leipiplugins-orgvalue">
    <!-- Multiple Checkboxes -->
    <label class="checkbox inline">
      <input type="checkbox" name="leipiNewField" title="復選框" value="選項1" class="leipiplugins" leipiplugins="checkbox" orginline="inline">
      選項1
    </label>
    <label class="checkbox inline">
      <input type="checkbox" name="leipiNewField" title="復選框" value="選項2" class="leipiplugins" leipiplugins="checkbox" orginline="inline">
      選項2
    </label>
  </div>
</div>
<div class="control-group component" rel="popover" title="復選控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名稱</label> <input type='text' id='orgname' placeholder='必填項'>
      <label class='control-label'>復選框</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一個選項</p>
      <hr/>
      <button class='btn btn-info' type='button'>確定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <label class="control-label leipiplugins-orgname">復選框</label>
  <div class="controls leipiplugins-orgvalue">
    <!-- Multiple Checkboxes -->
    <label class="checkbox">
      <input type="checkbox" name="leipiNewField" title="復選框" value="選項1" class="leipiplugins" leipiplugins="checkbox">
      選項1
    </label>
    <label class="checkbox">
      <input type="checkbox" name="leipiNewField" title="復選框" value="選項2" class="leipiplugins" leipiplugins="checkbox">
      選項2
    </label>
  </div>
</div>
<!-- Multiple Checkboxes end -->
<!-- Multiple radios start -->
<div class="control-group component" rel="popover" title="單選控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名稱</label> <input type='text' id='orgname' placeholder='必填項'>
      <label class='control-label'>單選框</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一個選項</p>
      <hr/>
      <button class='btn btn-info' type='button'>確定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <label class="control-label leipiplugins-orgname">單選</label>
  <div class="controls leipiplugins-orgvalue">
    <!-- Multiple Checkboxes -->
    <label class="radio inline">
      <input type="radio" name="leipiNewField" title="單選框" value="選項1" class="leipiplugins" leipiplugins="radio" orginline="inline">
      選項1
    </label>
    <label class="radio inline">
      <input type="radio" name="leipiNewField" title="單選框" value="選項2" class="leipiplugins" leipiplugins="radio" orginline="inline">
      選項2
    </label>
  </div>
</div>
<div class="control-group component" rel="popover" title="單選控件" trigger="manual"
  data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名稱</label> <input type='text' id='orgname' placeholder='必填項'>
      <label class='control-label'>單選框</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>一行一個選項</p>
      <hr/>
      <button class='btn btn-info' type='button'>確定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
  >
  <label class="control-label leipiplugins-orgname">單選</label>
  <div class="controls leipiplugins-orgvalue">
    <!-- Multiple Checkboxes -->
    <label class="radio">
      <input type="radio" name="leipiNewField" title="單選框" value="選項1" class="leipiplugins" leipiplugins="radio">
      選項1
    </label>
    <label class="radio">
      <input type="radio" name="leipiNewField" title="單選框" value="選項2" class="leipiplugins" leipiplugins="radio">
      選項2
    </label>
  </div>
</div>
<!-- Multiple radios end -->
              </div>
              <div class="tab-pane" id="2">
                <div class="control-group component" rel="popover" title="文件上傳" trigger="manual"
                  data-content="
                  <form class='form'>
                    <div class='controls'>
                      <label class='control-label'>控件名稱</label> <input type='text' id='orgname' placeholder='必填項'>
                      <hr/>
                      <button class='btn btn-info' type='button'>確定</button><button class='btn btn-danger' type='button'>取消</button>
                    </div>
                  </form>"
                  >
                  <label class="control-label leipiplugins-orgname">文件上傳</label>
                  <!-- File Upload -->
                  <div>
                    <input type="file" name="leipiNewField" title="文件上傳" class="leipiplugins" leipiplugins="uploadfile">
                  </div>
                </div>
              </div>
              <div class="tab-pane" id="5">
                <textarea id="source" class="span6"></textarea>
              </div>
            </fieldset>
          </form>
        </div><!--tab-content-->
        </div><!---tabbable-->
      </div> <!-- row -->
    </div> <!-- /container -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片拖動 圖片拖拽 拖動排序 拖拽排序 文本框 text文本框 單選框 單選按鈕
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子