Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .fieldwrapper { background-color: #eee; padding: 5px; margin-bottom: 10px; }
  .fieldwrapper input, .fieldwrapper select { display: block; }
  .fieldwrapper .control-button { float: right; margin-top: -20px; }
  .fieldwrapper .required { border: 1px red solid; }
  .btn-add { padding: 5px; margin-top: 10px;}
</style>
</head>
<body>
<fieldset id="buildyourform">
  <legend>Build your own form!</legend>
  <div id="fields"></div>
</fieldset>
<button class="btn-add">Add field</button>
​
<!-- I manually create  a set of input box here -->
<script id="fieldTemplate" type="text/x-jquery-tmpl">
  <div class="fieldwrapper" id="field_${Id}">
    <label>Field Name</label>
    <input type="text" name="fieldname_${Id}" class="required">
    <label>Field Type</label>
    <select class="fieldtype_${Id}">
      <option value="checkbox">Checked</option>
      <option value="textbox">Text</option>
      <option value="textarea">Paragraph</option>
    </select>
    <label>Require</label>
    <select class="fieldtype_${Id}">
      <option value="checkbox">Checked</option>
      <option value="1">Yes</option>
      <option value="0">No</option>
    </select>
    <label>Tag</label>
    <input type="text" name="fieldtag_${Id}" class="required">
    <div class="control-button">
      <button class="btn-remove">Remove</button>
    </div>
  </div>
</script>
<!-- I manually create a set of input box here -->
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers