json2htmlform

Summary

json2htmlform is a simple program to take a well formed JSON document and convert it into an HTML5 form

The following form tags are currently supported;

• input
• select
• button
• textarea

Every form must have the following mandatory tags;

1. name
A string
2. action
the form action URL
3. method
post, get, put or delete
4. html
An array of javascript objects that define a supported tag (see below)
5. enctype
A string e.g. "multipart/form-data"

Tag definitions

Only supported attributes can be used. For all tags, you must define a tag attribute. All other attributes are optional. Using attributes not defined here will cause the conversion to fail.

INPUT

If a label attribute is defined, a label tag will be prepended to the html above the tag.

Supported attributes;

• tag
• type
• name
• id
• placeholder
• value
• label
• class

Examples;

{
		"type": "text",
		"name": "wibble",
		"id": "wibble",
		"tag": "input",
		"placeholder": "wibble",
		 "label":"text box"
}, {
		"type": "checkbox",
		"name": "bike",
		"id": "bikecb",
		"tag": "input",
		"value": "bike",
		"label": "Bike"
	}, {
		"type": "checkbox",
		"name": "car",
		"id": "carcb",
		"tag": "input",
		"value": "car",
		"label": "Car"
}

SELECT

optgroups and options attributes can not be combined in a single select.

If a label attribute is defined, a label tag will be prepended to the html above the tag.

Supported attributes;

• tag
• optgroups
• options
• id
• label
• class

Examples;

{
		"tag": "select",
		"optgroups": [
			{
				"label": "Swedish Cars",
				"options": ["volvo", "saab"]
			}, {
				"label": "German Cars",
				"options": ["mercedes", "bmw", "audi"]
			}
		],
		"label": "select a car by country",
		"id": "selectcarbycountry"
	}, {
		"tag": "select",
		"options": ["mercedes", "bmw", "audi", "volvo", "saab"],
		"label": "select a car",
		"id": "selectcar"
	}

BUTTON

Supported attributes;

• tag
• type
• name
• id
• text
• class

Examples;

{
		"type": "button",
		"name": "button",
		"id": "buttonbutton",
		"tag": "button",
		"text": "button"
	} , {
		"type": "reset",
		"name": "reset",
		"id": "resetbutton",
		"tag": "button",
		"text": "reset"
	}, {
		"type": "submit",
		"name": "submit",
		"id": "submitbutton",
		"tag": "button",
		"text": "submit"
	}

TEXTAREA

Supported attributes;

• tag
• placeholder
• name
• id
• label
• class

Example;

{
		"name": "txtarea",
		"id": "mytextarea",
		"tag": "textarea",
		"placeholder": "wibble",
		"label": "this is a text area"
	}

Usage

from the command prompt / terminal type

node main.js --source file --target file

or type

node main.js --help

to display usage instructions

Full Example

run

node main.js --source testdata/example.json --target example.html

to see a worked example. The JSON used is reproduced below

{
"name": "Example Form",
"action": "example.html",
"method": "post",
"html": [
	{
		"type": "text",
		"name": "wibble",
		"id": "wibble",
		"tag": "input",
		"placeholder": "wibble",
		 "label":"text box"
	} , {
		"type": "text",
		"name": "wobble",
		"id": "wobble",
		"tag": "input",
		"placeholder": "wobble"
	}, {
		"type": "checkbox",
		"name": "bike",
		"id": "bikecb",
		"tag": "input",
		"value": "bike",
		"label": "Bike"
	}, {
		"type": "checkbox",
		"name": "car",
		"id": "carcb",
		"tag": "input",
		"value": "car",
		"label": "Car"
	}, {
		"type": "radio",
		"name": "sex",
		"id": "secm",
		"tag": "input",
		"value": "male",
		"label": "Male"
	}, {
		"type": "radio",
		"name": "sex",
		"id": "secf",
		"tag": "input",
		"value": "female",
		"label": "Female"
	}, {
		"type": "password",
		"name": "mypassword",
		"id": "password",
		"tag": "input",
		"placeholder": "password"
	}, {
		"tag": "select",
		"optgroups": [
			{
				"label": "Swedish Cars",
				"options": ["volvo", "saab"]
			}, {
				"label": "German Cars",
				"options": ["mercedes", "bmw", "audi"]
			}
		],
		"label": "select a car by country",
		"id": "selectcarbycountry"
	}, {
		"tag": "select",
		"options": ["mercedes", "bmw", "audi", "volvo", "saab"],
		"label": "select a car",
		"id": "selectcar"
	}, {
		"name": "txtarea",
		"id": "mytextarea",
		"tag": "textarea",
		"placeholder": "wibble",
		"label": "this is a text area"
	}, {
		"type": "button",
		"name": "button",
		"id": "buttonbutton",
		"tag": "button",
		"text": "button"
	} , {
		"type": "reset",
		"name": "reset",
		"id": "resetbutton",
		"tag": "button",
		"text": "reset"
	}
],
"enctype": "multipart/form-data"
}