Creating forms in JSON with jQuery
Creating and managing HTML forms is probably one of the most tedious and in many web applications also the most important part of the frontend development process. Forms generated in a web application usually need to contain information on how they bind to domain objects, errors that occurred during processing and the values of different fields. Because maintaining all these information manually is very error prone and requires writing a lot of repetitive markup there are different approaches that support developers in this task:
- Declarative: The framework supports custom tags that create form elements with all the information it needs to process that form (e.g. the JSTL Spring Form taglib)
- Helper: In a view script the framework offers helper functions you can call which return a new form element (e.g. Ruby on Rails)
- Programmatic: Forms are created programatically in the frameworks programming language (e.g. GWT, the Sencha ExtJS Forms or Zend Form)
- GUI based: The form is created in a graphical user interface via Drag and Drop (e.g. the just started jQuery Form Builder project or ASP.NET web forms)
Inspired by the programmatic approach and the fact that there doesn’t seem to be any jQuery plugin for this I started the jQuery dForm plugin (currently version 0.1.3). The ideas behind it:
- Use JSON (or XML) as the form definition format. Easy to generate (e.g. automatically from your domain model) and flexible enough so that it can still be used to generate forms on the server side.
- Easily extensible: Possibility to support other plugins, your own jQuery powered form elements or improving existing ones
- Don’t reinvent the wheel: Add support for existing plugins like jQuery UI, the Validation Plugin or the jQuery Form plugin and keep the plugin itself as compact as possible.
The basic example to use the plugin looks like this:
Worth mentioning: Since JSON (or XML for that matter) are quite abstract formats and the form generation itself is done by the client, an extension for generating browser specific HTML5 forms is currently under development.
If you have questions or want to contribute (e.g. by adding dForm support to your own form related plugin :) visit the plugin homepage on GitHub.