master

分支 (1)

标签 (1)

管理

管理

master

0.1

WebCodeGenerate
/
formgenerate.html

<!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="./formgenerate/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="./formgenerate/bootstrap-responsive.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style type="text/css"></style>
</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 表单构造器</a>
                <select id="h-emot-select"><option value="">无</option><option value="|∀ﾟ">|∀ﾟ</option><option value="(´ﾟДﾟ`)">(´ﾟДﾟ`)</option><option value="(;´Д`)">(;´Д`)</option><option value="(｀･ω･)">(｀･ω･)</option><option value="(=ﾟωﾟ)=">(=ﾟωﾟ)=</option><option value="| ω・´)">| ω・´)</option><option value="|-` )">|-` )</option><option value="|д` )">|д` )</option><option value="|ー` )">|ー` )</option><option value="|∀` )">|∀` )</option><option value="(つд⊂)">(つд⊂)</option><option value="(ﾟДﾟ≡ﾟДﾟ)">(ﾟДﾟ≡ﾟДﾟ)</option><option value="(＾o＾)ﾉ">(＾o＾)ﾉ</option><option value="(|||ﾟДﾟ)">(|||ﾟДﾟ)</option><option value="( ﾟ∀ﾟ)">( ﾟ∀ﾟ)</option><option value="( ´∀`)">( ´∀`)</option><option value="(*´∀`)">(*´∀`)</option><option value="(*ﾟ∇ﾟ)">(*ﾟ∇ﾟ)</option><option value="(*ﾟーﾟ)">(*ﾟーﾟ)</option><option value="(　ﾟ 3ﾟ)">(　ﾟ 3ﾟ)</option><option value="( ´ー`)">( ´ー`)</option><option value="( ・_ゝ・)">( ・_ゝ・)</option><option value="( ´_ゝ`)">( ´_ゝ`)</option><option value="(*´д`)">(*´д`)</option><option value="(・ー・)">(・ー・)</option><option value="(・∀・)">(・∀・)</option><option value="(ゝ∀･)">(ゝ∀･)</option><option value="(〃∀〃)">(〃∀〃)</option><option value="(*ﾟ∀ﾟ*)">(*ﾟ∀ﾟ*)</option><option value="( ﾟ∀。)">( ﾟ∀。)</option><option value="( `д´)">( `д´)</option><option value="(`ε´ )">(`ε´ )</option><option value="(`ヮ´ )">(`ヮ´ )</option><option value="σ`∀´)">σ`∀´)</option><option value=" ﾟ∀ﾟ)σ"> ﾟ∀ﾟ)σ</option><option value="ﾟ ∀ﾟ)ノ">ﾟ ∀ﾟ)ノ</option><option value="(╬ﾟдﾟ)">(╬ﾟдﾟ)</option><option value="(|||ﾟдﾟ)">(|||ﾟдﾟ)</option><option value="( ﾟдﾟ)">( ﾟдﾟ)</option><option value="Σ( ﾟдﾟ)">Σ( ﾟдﾟ)</option><option value="( ;ﾟдﾟ)">( ;ﾟдﾟ)</option><option value="( ;´д`)">( ;´д`)</option><option value="(　д ) ﾟ ﾟ">(　д ) ﾟ ﾟ</option><option value="( ☉д⊙)">( ☉д⊙)</option><option value="(((　ﾟдﾟ)))">(((　ﾟдﾟ)))</option><option value="( ` ・´)">( ` ・´)</option><option value="( ´д`)">( ´д`)</option><option value="( -д-)">( -д-)</option><option value="(>д<)">(&gt;д&lt;)</option><option value="･ﾟ( ﾉд`ﾟ)">･ﾟ( ﾉд`ﾟ)</option><option value="( TдT)">( TдT)</option><option value="(￣∇￣)">(￣∇￣)</option><option value="(￣3￣)">(￣3￣)</option><option value="(￣ｰ￣)">(￣ｰ￣)</option><option value="(￣ . ￣)">(￣ . ￣)</option><option value="(￣皿￣)">(￣皿￣)</option><option value="(￣艸￣)">(￣艸￣)</option><option value="(￣︿￣)">(￣︿￣)</option><option value="(￣︶￣)">(￣︶￣)</option><option value="ヾ(´ωﾟ｀)">ヾ(´ωﾟ｀)</option><option value="(*´ω`*)">(*´ω`*)</option><option value="(・ω・)">(・ω・)</option><option value="( ´・ω)">( ´・ω)</option><option value="(｀・ω)">(｀・ω)</option><option value="(´・ω・`)">(´・ω・`)</option><option value="(`・ω・´)">(`・ω・´)</option><option value="( `_っ´)">( `_っ´)</option><option value="( `ー´)">( `ー´)</option><option value="( ´_っ`)">( ´_っ`)</option><option value="( ´ρ`)">( ´ρ`)</option><option value="( ﾟωﾟ)">( ﾟωﾟ)</option><option value="(oﾟωﾟo)">(oﾟωﾟo)</option><option value="(　^ω^)">(　^ω^)</option><option value="(｡◕∀◕｡)">(｡◕∀◕｡)</option><option value="/( ◕‿‿◕ )\">/( ◕‿‿◕ )\</option><option value="ヾ(´ε`ヾ)">ヾ(´ε`ヾ)</option><option value="(ノﾟ∀ﾟ)ノ">(ノﾟ∀ﾟ)ノ</option><option value="(σﾟдﾟ)σ">(σﾟдﾟ)σ</option><option value="(σﾟ∀ﾟ)σ">(σﾟ∀ﾟ)σ</option><option value="|дﾟ )">|дﾟ )</option><option value="┃電柱┃">┃電柱┃</option><option value="ﾟ(つд`ﾟ)">ﾟ(つд`ﾟ)</option><option value="ﾟÅﾟ )　">ﾟÅﾟ )　</option><option value="⊂彡☆))д`)">⊂彡☆))д`)</option><option value="⊂彡☆))д´)">⊂彡☆))д´)</option><option value="⊂彡☆))∀`)">⊂彡☆))∀`)</option><option value="(´∀((☆ミつ">(´∀((☆ミつ</option></select>
                <input type="text" id="moefont" value="" />
                <ul class="nav pull-right">
                    <li>
                        <div class="btn-group">
                            <span><a class="btn btn-primary" href="index.html" id="formgenerate">布局生成器</a></span>
                        </div>
                    </li>
                </ul>
            </div>
        </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" style="background-color: rgb(255, 255, 255);">
                            <fieldset>
                                <div id="legend" class="component" rel="popover" trigger="manual" data-content="
                    &lt;form class=&#39;form&#39;&gt;
                      &lt;div class=&#39;controls&#39;&gt;
                        &lt;label class=&#39;control-label&#39;&gt;标题&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;title&#39; id=&#39;text&#39;&gt;
                        &lt;hr/&gt;
                        &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/form&gt;" data-original-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>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
            <div class="span6">
                <h2>拖拽组件到左侧</h2>
                <hr>
                <div class="tabbable">
                    <ul class="nav nav-tabs" id="navtab">
                        <li class=""><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">下拉框</a></li>
                        <li class=""><a href="http://www.bootcss.com/p/bootstrap-form-builder/#3" data-toggle="tab">单选框、复选框</a></li>
                        <li class=""><a href="http://www.bootcss.com/p/bootstrap-form-builder/#4" data-toggle="tab">文件 / 按钮</a></li>
                        <li class="active"><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" id="1">
                                    <div class="control-group component" data-type="text" rel="popover" title="Text Input" trigger="manual" data-content="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Placeholder&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;placeholder&#39; id=&#39;placeholder&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Help Text&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;help&#39; id=&#39;help&#39;&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <!-- Text input-->
                                        <label class="control-label valtype" for="input01" data-valtype="label">文本输入</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Placeholder&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;placeholder&#39; id=&#39;placeholder&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Help Text&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;help&#39; id=&#39;help&#39;&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <!-- Search input-->
                                        <label class="control-label valtype" data-valtype="label">搜索输入</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Prepend&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;prepend&#39; id=&#39;prepend&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Placeholder&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;placeholder&#39; id=&#39;placeholder&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Help Text&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;help&#39; id=&#39;help&#39;&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <!-- Prepended text-->
                                        <label class="control-label valtype" data-valtype="label">前置文本</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Appepend&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;append&#39; id=&#39;append&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Placeholder&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;placeholder&#39; id=&#39;placeholder&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Help Text&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;help&#39; id=&#39;help&#39;&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <!-- Appended input-->
                                        <label class="control-label valtype" data-valtype="label">后置文本</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Placeholder&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;placeholder&#39; id=&#39;placeholder&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Help Text&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;help&#39; id=&#39;help&#39;&gt;
                          &lt;label class=&#39;checkbox&#39;&gt;&lt;input type=&#39;checkbox&#39; class=&#39;input-inline&#39; name=&#39;checked&#39; id=&#39;checkbox&#39;&gt;Checked&lt;/label&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <!-- Prepended checkbox -->
                                        <label class="control-label valtype" data-valtype="label">前置单选框</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Placeholder&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;placeholder&#39; id=&#39;placeholder&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Help Text&lt;/label&gt; &lt;input type=&#39;text&#39; name=&#39;help&#39; id=&#39;help&#39;&gt;
                          &lt;label class=&#39;checkbox&#39;&gt;&lt;input type=&#39;checkbox&#39; class=&#39;input-inline&#39; name=&#39;checked&#39; id=&#39;checkbox&#39;&gt;Checked&lt;/label&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <!-- Appended checkbox -->
                                        <label class="control-label valtype" data-valtype="label">后置单选框</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <!-- 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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Options: &lt;/label&gt;
                          &lt;textarea style=&#39;min-height: 200px&#39; id=&#39;option&#39;&gt; &lt;/textarea&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <!-- Select Basic -->
                                        <label class="control-label valtype" data-valtype="label">基本</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Options: &lt;/label&gt;
                          &lt;textarea style=&#39;min-height: 200px&#39; id=&#39;option&#39;&gt;&lt;/textarea&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <!-- Select Multiple -->
                                        <label class="control-label valtype" data-valtype="label">多选</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Options: &lt;/label&gt;
                          &lt;textarea style=&#39;min-height: 200px&#39; id=&#39;checkboxes&#39;&gt; &lt;/textarea&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <label class="control-label valtype" data-valtype="label">复选</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Group Name Attribute&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;name&#39; id=&#39;name&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Options: &lt;/label&gt;
                          &lt;textarea style=&#39;min-height: 200px&#39; id=&#39;radios&#39;&gt;&lt;/textarea&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <label class="control-label valtype" data-valtype="label">单选</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;textarea style=&#39;min-height: 200px&#39; id=&#39;inline-checkboxes&#39;&gt;&lt;/textarea&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <label class="control-label valtype" data-valtype="label">紧凑复选</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Group Name Attribute&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;name&#39; id=&#39;name&#39;&gt;
                          &lt;textarea style=&#39;min-height: 200px&#39; id=&#39;inline-radios&#39;&gt;&lt;/textarea&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <label class="control-label valtype" data-valtype="label">紧凑单选</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <label class="control-label valtype" data-valtype="label">文件上传</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="
                      &lt;form class=&#39;form&#39;&gt;
                        &lt;div class=&#39;controls&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Label Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;label&#39;&gt;
                          &lt;label class=&#39;control-label&#39;&gt;Button Text&lt;/label&gt; &lt;input class=&#39;input-large&#39; type=&#39;text&#39; name=&#39;label&#39; id=&#39;button&#39;&gt;
                          &lt;label class=&#39;control-label&#39; id=&#39;&#39;&gt;Type: &lt;/label&gt;
                          &lt;select class=&#39;input&#39; id=&#39;color&#39;&gt;
                            &lt;option id=&#39;btn-default&#39;&gt;Default&lt;/option&gt;
                            &lt;option id=&#39;btn-primary&#39;&gt;Primary&lt;/option&gt;
                            &lt;option id=&#39;btn-info&#39;&gt;Info&lt;/option&gt;
                            &lt;option id=&#39;btn-success&#39;&gt;Success&lt;/option&gt;
                            &lt;option id=&#39;btn-warning&#39;&gt;Warning&lt;/option&gt;
                            &lt;option id=&#39;btn-danger&#39;&gt;Danger&lt;/option&gt;
                            &lt;option id=&#39;btn-inverse&#39;&gt;Inverse&lt;/option&gt;
                          &lt;/select&gt;
                          &lt;hr/&gt;
                          &lt;button class=&#39;btn btn-info&#39;&gt;Save&lt;/button&gt;&lt;button class=&#39;btn btn-danger&#39;&gt;Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;">
                                        <label class="control-label valtype" data-valtype="label">按钮</label>
                                        <!-- Button -->
                                        <div class="controls valtype" data-valtype="button">
                                            <button class="btn btn-success">Button</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane active" id="5">
                                    <textarea id="source" class="span6" onclick="copy()"></textarea>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
            <!-- row -->
        </div>
        <!-- /container -->
        <script src="./formgenerate/jquery.min.js"></script>
        <script src="./formgenerate/bootstrap.min.js"></script>
        <script src="./formgenerate/fb.js"></script>
        <script src="./formgenerate/h.js" type="text/javascript"></script>
        <script src="./formgenerate/h(1).js" type="text/javascript"></script>
        <script type="text/javascript" language="javascript">
            //复制到剪切板js代码
            function copy() {
                var code = $("#source").val();
                copyToClipBoard(code);
            }
            function copyToClipBoard(s) {
                //alert(s);
                if (window.clipboardData) {
                    window.clipboardData.setData("Text", s);
                    //alert("已经复制到剪切板！" + "\n" + s);
                } else if (navigator.userAgent.indexOf("Opera") != -1) {
                    window.location = s;
                } else if (window.netscape) {
                    try {
                        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
                    } catch (e) {
                        alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");
                    }
                    var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
                    if (!clip)
                        return;
                    var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
                    if (!trans)
                        return;
                    trans.addDataFlavor('text/unicode');
                    var str = new Object();
                    var len = new Object();
                    var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
                    var copytext = s;
                    str.data = copytext;
                    trans.setTransferData("text/unicode", str, copytext.length * 2);
                    var clipid = Components.interfaces.nsIClipboard;
                    if (!clip)
                        return false;
                    clip.setData(trans, null, clipid.kGlobalClipboard);
                }
            }</script>
        <script>
            $("#source").popover({
                trigger: 'click',
                placement: 'top',
                content: '代码已复制到剪切板,限IE/FF'
            });
            $("#h-emot-select").change(function (){

                $("#moefont").val( $("#h-emot-select").val());
            });
        </script>
    </div>
</body>

</html>