jsonform
Version:
Client-side JavaScript library that generates HTML forms from structured data models expressed using a JSON schema, possibly completed by a form layout description.
114 lines (98 loc) • 3.7 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>JSON Form Playground</title>
<style>
@import url("../deps/opt/bootstrap.css");
@import url("../deps/opt/bootstrap-wysihtml5.css");
@import url("../deps/opt/spectrum.css");
h2 { font-weight: 200; margin-top: 0; }
.tagline {
padding: 10px;
font-weight: 200;
margin-top: -1em;
}
.footer {
margin-top: 40px;
padding: 10px 0.5em;
border-top: 1px solid #E5E5E5;
}
#form .add-on {
border: none;
background-color: inherit;
}
.expandable > legend:before {
content: '\25B8';
padding-right: 5px;
}
.expanded > legend:before {
content: '\25BE';
}
._jsonform-array-buttons {
margin-left: 25px;
}
.jsonform-required > label:after {
content: ' *';
color: red;
}
form.jsonform-hasrequired:after {
content: '* Required field';
display: block;
color: red;
padding-top: 1em;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand" href="#">JSON Form Playground</a>
<div>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="https://github.com/jsonform/jsonform/wiki">Documentation</a></li>
<li><a href="https://github.com/jsonform/jsonform">Project on github</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="tagline">
<p>Choose a JSON Form example below and check the generated form. Refer to the <a href="https://github.com/jsonform/jsonform/wiki">documentation</a> for details and directions to extend the form.</p>
</div>
<div class="row">
<div class="col-md-5">
<form id="form" class="form-vertical"></form>
</div>
<div class="col-md-7">
<h2>Generated form</h2>
<div id="result" class="well">(please wait)</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>Originally created by <a href="https://joshfire.com">Joshfire</a>.</p>
<p><a href="https://github.com/jsonform/jsonform" title="JSON Form library code">Code</a> available on github, licensed under the <a href="https://raw.github.com/jsonform/jsonform/master/LICENSE">MIT License</a> — See <a href="https://github.com/jsonform/jsonform/wiki#wiki-deps">dependencies</a> for the list of libraries and licenses used by JSON Form.</p>
</div>
</footer>
<script src="../deps/jquery.min.js"></script>
<script src="../deps/underscore.js"></script>
<script src="../deps/opt/jsv.js"></script>
<script src="../deps/opt/jquery-ui.js"></script>
<script src="../deps/opt/bootstrap-dropdown.js"></script>
<script src="../deps/opt/bootstrap-wysihtml5.js"></script>
<script src="../deps/opt/spectrum.js"></script>
<script src="../deps/opt/ace/ace.js"></script>
<script src="../deps/opt/ace/mode-json.js"></script>
<script src="../deps/opt/ace/mode-html.js"></script>
<script src="../deps/opt/ace/mode-css.js"></script>
<script src="../deps/opt/ace/mode-javascript.js"></script>
<script src="../deps/opt/ace/mode-less.js"></script>
<script src="../deps/opt/ace/mode-markdown.js"></script>
<script src="../deps/opt/jquery.transloadit2.js"></script>
<script src="../lib/jsonform.js"></script>
<script src="playground.js"></script>
</body>
</html>