how to create a html form using a JSON definition? how to create a html form using a JSON definition? json json

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.