The jQuery.dForm plugin generates HTML markup from JavaScript objects and [JSON](http://json.org)

with a focus on HTML forms.

__Some things you can do:__

* use JavaScript and JSON instead of HTML markup since your page doesn't run without JS anyway

* generate JavaScript enhanced markup with your own extensions and custom types

* have an easy way to include jQuery UI elements and JavaScript validation (both supported out of the box)

[Download](http://github.com/downloads/daffl/jquery.dform/jquery.dform-0.1.4.tar.gz)

the latest version 0.2.0 (6 Kb minified)

Then try this JavaScript snipped:

$("#myform").dform({

"action" : "index.html",

"method" : "get",

"html" :

[

{

"type" : "p",

"html" : "You must login"

},

{

"name" : "username",

"id" : "txt-username",

"caption" : "Username",

"type" : "text",

"placeholder" : "E.g. user@example.com"

},

{

"name" : "password",

"caption" : "Password",

"type" : "password"

},

{

"type" : "submit",

"value" : "Login"

}

]

});

__Learn more:__

* Check out the JSFiddle examples or the get started page for more examples

* Fork the project on [GitHub](http://github.com/daffl/jquery.dform/)

* Read on in this documentation

Type Generators are functions that return a new jQuery DOM object for a specific type. If there is no Type Generator

with a given name, a basic HTML element with that tag name will be created. Every other key in the JavaScript or JSON object

you pass will be used as an HTML attribute. An exception is, if there is a Subscriber registered for that ke (more about

this in the next section). A plugin call like this:

$('#my-div').dform({

type : "span",

id : "the-span"

});

Will append an empty \<span id="the-span"\> tag to the element with the id my-div.

Besides standard HTML tags the following core types are supported:

* __container__: Creates a \<div\> container (you can also use { type : 'div' })

* __text__: Creates a text input field

* __password__: Creates a password input field

* __submit__: Creates a submit button input element

* __reset__: Creates a reset button input element

* __hidden__: Creates a hidden input element

* __file__: Create a file upload field

* __radio__: Creates a radio button

* __checkbox__: Creates a checkbox

* __radiobuttons__: Creates a group of radiobuttons (uses options subscriber explained below)

* __checkboxes__: Creates a group of checkboxes

* __number__: Creates an HTML 5 number input field

* __url__: Creates an HTML 5 url input field

* __tel__: Creates an HTML 5 phone number input field

* __email__: Creates an HTML 5 email input field

Not everything can be solved using a custom type. Adding a class for example doesn't need to be implemented

every time and this is where Subscribers come in. Subscribers are functions that will be called for the key they

have been registered for when traversing the object that has been passed to the plugin.

* class:

* html:

* elements:

* value:

* css:

* options:

* caption:

* url:

* type:

Currently there are two types of special subscribers

* __\[pre\]__ Functions registered with this name will be called before any processing occurs.

* __\[post\]__ Functions registered with this name will be called after all processing is finished.

Here is a quick example walkthrough:

$("#myform").dform({

"name" : "textfield",

"type" : "text",

"id" : "testid",

"value" : "Testvalue",

"caption" : "Label for textfield"

});

Which will do the following:

* Look for a Type Generator with the name __text__, which creates an input field with the type text

* Add the HTML attributes to the input element that don't have a subscriber registered (which are __name__ and __id__)

* Add the new element to the DOM (append to #myform)

* Run the __type__ subscriber which adds the auto generated class name _ui-dform-text_ to the input field

* Run the __value__ subscriber which sets the value of this form element

* Run the __caption__ subscriber which adds a label before the textfield

var getOptions = function(type, options)

return $("<div>").dform('attr', options).progressbar(_getOptions("progressbar", options));

return $("<div>").dform('attr', options).slider(_getOptions("slider", options));

return $("<div>").dform('attr', options);

return $("<div>").dform('attr', options);

$(scoper).dform('append', options);

if(type === "form")

$(this).dform('run', 'options', optlist, type);