how to create a html form using a JSON definition?

49,361

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
Share:
49,361

Related videos on Youtube

Ed_
Author by

Ed_

Updated on July 09, 2022

Comments

  • Ed_
    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.
      Jeremy S. about 9 years
      Little 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_
    Ed_ over 12 years
    Interesting, 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
    Kon over 12 years
    Then I'm afraid you'll have to write your own generic routine for creating elements/tables and rows.
  • Ed_
    Ed_ over 12 years
    I 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
    Igor Minar over 12 years
    sweet. 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
    yegeniy over 9 years
    It 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
    Anthropic about 6 years
    You 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
    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

Related