深蓝计划（功能篇）表单构建器
你猜
阅读：632
2021-03-31 21:43:45
评论：0
源码：
<!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
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
