The jQuery.dForm plugin generates HTML markup from JavaScript objects and JSON with a focus on HTML forms.

Some things you can do:

naturally generate JavaScript enhanced markup with your own extensions and custom types
use JavaScript and JSON instead of HTML markup since your page doesn't run without JS anyway
have an easy way to include jQuery UI elements and other jQuery plugins (some supported out of the box)
scaffold forms from business objects of your server side framework

Get started

Download the latest version 1.1.0 (min) (~7 Kb minified)

Include it in your jQuery powered page and try this:

<script type="text/javascript">
	$(function() {
	  // Generate a form
		$("#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"
		        }
		    ]
		});
	});
</script>
<form id="myform"></form>

Or to quickly load an external form definition:

<script type="text/javascript">
	$(function() {
	  // Load the form object from path/to/form.json
		$("#myform").dform('path/to/form.json', function(data) {
		  this //-> Generated $('#myform')
		  data //-> data from path/to/form.json
		});
	});
</script>
<form id="myform"></form>

Demo:

Learn more:

Visit the above example on jsfiddle.com
Watch and fork the project on GitHub
Follow @daffl on Twitter
Read on in this documentation

Types

Type generators are functions that return a new jQuery DOM object for a specific type. If there is no type generator for that type, a basic HTML tag with that name will be created. Every other key in the JavaScript object you pass (the dForm object) will be used as an HTML attribute, except if there is a subscriber registered for that key. A plugin call like this:

$('#my-div').dform({
	type : "span",
	id : "the-span"
});

Will append an empty  to the selected element.

Core types

Besides standard HTML tags the following core types are supported:

container { "type" : "container" } Creates a <div> container (you can also use { "type" : "div" })

text { "type" : "text" } Creates a text input field

password { "type" : "password" } Creates a password input field

submit { "type" : "submit" } Creates a submit button input element

reset { "type" : "reset" } Creates a reset button input element

hidden { "type" : "hidden" } Creates a hidden input element

file { "type" : "file" } Create a file upload field

radio { "type" : "radio" } Creates a radio button

checkbox { "type" : "checkbox" } Creates a checkbox

radiobuttons { "type" : "radiobuttons" } Creates a group of radiobuttons (uses options subscriber explained below)

checkboxes { "type" : "checkboxes" } Creates a group of checkboxes (uses options subscriber explained below)

number { "type" : "number" } Creates an HTML 5 number input field

url { "type" : "url" } Creates an HTML 5 url input field

tel { "type" : "tel" } Creates an HTML 5 phone number input field

email { "type" : "email" } Creates an HTML 5 email input field

Add your own

You can add your own types by calling $.dform.addType and pass the type name and a function that takes the dForm object as a parameter and returns a new jQuery DOM element:

$.dform.addType("hellobutton", function(options) {
	// Return a new button element that has all options that
	// don't have a registered subscriber as attributes
	return $("<button>").dform('attr', options).html("Say hello");
});

The type generator uses the attr plugin method to add the proper HTML attributes to the button. Now the new type can be used like this:

$('#myform').dform({
	"type" : "hellobutton",
	"id" : "my-button"
});

Which generates:

<button id="my-button" class="ui-dform-hellobutton">Say hello</button>

Type generators can be chained. That means, that if you add a type that already exists this in the generator function will refer to the element returned by its previous generator:

$.dform.addType("text", function(options) {
	return $(this).addClass('my-textfield-class');
});

$('#myform').dform({
	type : 'text'
});

Now generates

<input type="text" class="ui-dform-text my-textfield-class" />

Subscribers

While type generators are being used to generate a base element for the given type, subscribers attach to certain attributes in the dForm object. When traversing the object, all subscribers registered for that key will be executed on the current element.

Core subscribers

class {String} Adds a class to the current element (instead of setting the attribute) using .addClass().

{
	"type" : "div",
	"class" : "the-div container"
}

Generates:

<div class="ui-dform-div the-div container"></div>

html/elements {String|Array|Object} Based on the options it either sets the HTML string content of the current element or appends one or an array of dForm objects. The elements subscriber does the same but is kept for backwards compatibility.

{
    "type" : "div",
    "html" : "Div content"
}

Generates:

<div class="ui-dform-div">Div content</div>

This subscriber can also be used to create nested objects by using one or an array of dForm objects:

{
	"type" : "div",
	"html" :
	[
		{
			"type" : "text"
		},
		{
			"type" : "div",
			"html" : {
				"type" : "p",
				"html" : "A paragraph"
			}
		}
	]
}

Generates:

<div class="ui-dform-div">
	<input type="text" class="ui-dform-text" />
	<div class="ui-dform-div">
		<p class="ui-dform-p">A paragraph</p>
	</div>
</div>

value {String|Function} Sets the value of the element using .val()

{
	"type" : "text",
	"value" : "Text content"
}

Generates:

<input type="text" value="Text content" />

css {Object} Sets CSS properties on an element using .css():

{
	"type" : "div",
	"css" : {
		"background-color" : "#FF0000",
		"display" : "none"
	}
}

Generates:

<div class="ui-dform-div" style="background-color: #FF0000; display: none;"></div>

options {Object} Generates a list of options from a value to text (or dForm Object) mapping for elements of type select:

{
	"type" : "select",
	"options" : {
		"us" : "USA",
		"ca" : "Canada",
		"de" : {
			"selected" : "selected",
			"html" : "Germany"
		}
	}
}

Generates:

<select>
	<option value="us">USA</option>
	<option value="ca">Canada</option>
	<option value="de" selected="selected">Germany</option>
</select>

radiobuttons and checkboxes work similarly:

{
	"type" : "select",
	"options" : {
		"us" : "USA",
		"ca" : {
			"checked" : "checked",
			"caption" : "Canada"
		},
		"de" : "Germany"
	}
}

To use option groups just pass an object of type optgroup:

{
	"type" : "select",
	"options" : {
	  "northamerica" : {
	    "type" : "optgroup",
	    "label" : "North America",
	    "options" : {
      "us" : "USA",
      "ca" : "Canada"
	    }
	  },
	  "europe" : {
	    "type" : "optgroup",
	    "label" : "Europe",
	    "options" : {
	      "de" : {
        "selected" : "selected",
        "html" : "Germany"
      },
      "fr" : "France"
	    }
	  }
	}
}

You can also use options on checkboxes and radiobuttons which will create a list of checkbox or radio elements:

{
	"type" : "checkboxes",
	"options" : {
		"newsletter" : "Receive the newsletter",
		"terms" : "I read the terms of service",
		"update" : "Keep me up to date on new events"
	}
}

Generates:

<div class="ui-dform-checkboxes">
	<input type="checkbox" class="ui-dform-checkbox" value="newsletter">
	<label class="ui-dform-label">Receive the newsletter</label>
	<input type="checkbox" class="ui-dform-checkbox" value="terms">
	<label class="ui-dform-label">I read the terms of service</label>
	<input type="checkbox" class="ui-dform-checkbox" value="update">
	<label class="ui-dform-label">Keep me up to date on new events</label>
</div>

Note: The Google Chrome JavaScript engine V8 orders object keys that can be cast to numbers by their value and not by the order of their definition.

caption {String|Object} Adds a caption to the element. The type used depends on the element type:

A legend on fieldset elements
A label next to radio or checkbox elements
A label before any other element

If the element has its id set, the for attribute of the label will be set as well.

{
	"type" : "text",
	"name" : "username",
	"id" : "username",
	"caption" : "Enter your username"
}

Generates:

<label for="username" class="ui-dform-label">Enter your username</label>
<input type="text" class="ui-dform-text" id="username" />

For fieldsets:

{
	"type"

Jquery.dform

Install / Use

README

Get started

Types

Core types

Add your own

Subscribers

Core subscribers