how to create a html form using a JSON definition?
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");
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.
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.