how to create a html form using a JSON definition?
Solution 1
In shameless self promotion I would also like to mention my jQuery.dForm plugin. It's been around for a while now and support the jQuery validation plugin, jQuery UI and is easily extensible. This is how it looks:
var formdata =
{
"action" : "index.html",
"method" : "get",
"elements" :
[
{
"name" : "textfield",
"caption" : "Label for textfield",
"type" : "text",
"value" : "Hello world"
},
{
"type" : "submit",
"value" : "Submit"
}
]
};
$("#myform").buildForm(formdata);
// Or to load the form definition via AJAX
$("#myform").buildForm("http://example.com/myform.json");
Solution 2
I would suggest using JSON Form.
It takes a JSON Schema and can instantly make a form for it, and additionally give you options to customize the form further. E.g.:
$('#myform').jsonForm({
schema: {
name: {
type: 'string',
title: 'Name',
required: true
},
age: {
type: 'number',
title: 'Age'
}
}
});
…would generate a form with two inputs in #myform element. (jQuery is optional.)
Using the standardized format JSON Schema gives other great advantages and more tools to work with the data definition.
Solution 3
I would agree with Jeremy S Angular Schema Form is outstanding. It follows the same pattern as JSON Form and I have started using it in production and it is working very well.
It is also extensible and I quite quickly wrote a tool to read hyper-schema definition and pull in select field options from an external source and watch other related fields for their data before doing so. It took only a day to build that, suffice to say it is really easy to extend and as it also takes advantage of Angular I would class it as the best choice.
If you are not using Angular then JSON Form would be my preferred option since I see its schema and form pattern emerging as a bit of a standard with these two projects using it. Also given my experience working in enterprise service management it makes sense as nearly all tools for service management have a data model and then a form design administration component for extending the model.
Disclaimer: I was not maintaining Angular Schema Form when I wrote this.
I only became the maintainer on the project a year later because I already loved it.
Solution 4
Definitely check out Alpaca: http://www.alpacajs.org
It renders HTML forms from JSON Schema using Bootstrap, jQueryUI, jQuery Mobile or straight web controls. It has a large library of controls and all sorts of nifty features.
We use it at Cloud CMS (http://www.cloudcms.com) to render some really intuitive UIs.
Alpaca itself is Apache 2.0 licensed and on GitHub (https://github.com/gitana/alpaca).
The coming 1.5.0 release introduces pure Handlebars support and custom gulp builds. Pretty cool stuff.
Solution 5
May I humbly suggest Metawidget?
It generates HTML forms from arbitrary complex JSON objects. Simple JavaScript example:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://metawidget.org/js/4.0/metawidget-core.min.js"></script>
<style>
#metawidget {
border: 1px solid #cccccc;
width: 250px;
border-radius: 10px;
padding: 10px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="metawidget"></div>
<script type="text/javascript">
var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ));
mw.toInspect = {
firstname: 'Homer',
surname: 'Simpson',
age: 36
};
mw.buildWidgets();
</script>
</body>
</html>
It also supports:
- augmenting the JSON object with additional sources of metadata, such as JSON Schema or metadata from REST services
- frameworks such as JQuery UI, JQuery Mobile, AngularJS
- third-party component libraries and validators
- pluggable layouts
Related videos on Youtube
Ed_
Updated on July 09, 2022Comments
-
Ed_ over 1 year
I am looking for a javascript lib which enables me to store (html) forms in JSON format, with a bit of intelligence built into validate inputs client side. Something like:
function FormController(){ this.user = { name: 'John Smith', address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'}, contacts:[{type:'phone', value:'1(234) 555-1212'}] }; this.state = /^\w\w$/; this.zip = /^\d\d\d\d\d$/; }
(This is taken from http://docs.angularjs.org/#!cookbook.form ). It's almost what I want, as it offers basic client side validation with regular expressions and you can provide defaults but it appears to still need you to create the HTML form.
I want something that only requires the definition. Any ideas?
-
Jeremy S. about 9 yearsLittle bit outdated but since you are mentioning AngularJS as a link you could also try out automatic form generation from JSON schemas via Angular Schema Form it also comes with support for Bootstrap 3 :D
-
-
Ed_ over 12 yearsInteresting, this isn't quite what I am looking for though. Problem is that you have to define the html upfront, I don't know in advance the fields I want, thus I want each field to be created from the json object.
-
Kon over 12 yearsThen I'm afraid you'll have to write your own generic routine for creating elements/tables and rows.
-
Ed_ over 12 yearsI am working on making a plugin system to enable 3rd parties to add components. I want them to be able to request user data but I dont want to give them access to the actual js or html of my page. Thus they need a flexible option to define the user input they require and should get an option for both client side data validation and server side validation.
-
Igor Minar over 12 yearssweet. that sounds really good. can we move this discussion to our mailing list: groups.google.com/forum/?lnk=srg#!forum/angular the stack overflow text area is killing me. Just start a new thread there. We'll repost the final resolution on stack overflow afterwards.
-
yegeniy over 9 yearsIt has a really great set of examples at github.com/joshfire/jsonform/tree/master/playground and can be used to create forms with arrays of nested objects.
-
Anthropic about 6 yearsYou should probably more explicitly mention your involvement in the framework as it's creator, it is a cool framework, congrats. Glad you have json-schema support, I'm hoping to progress a json-ui-schema proposal at json-schema-org to make UI generation more consistent across json-schema based UI implementations :)
-
Gene Bo about 5 years@Daff - this is great for quickly and easily generating the form HTML. However, I want to handle form-submit myself, and not actually submit through the
<FORM action='/abc/'>
attribute. How can the default form-submit event be blocked or otherwise intercepted? At the moment, my work-around is to add my own<button>
HTML under the form div, set a jQuery listener to that, and use that for submit. Thanks