json2htmlform

    0.6.3 • Public • Published

    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
    2. A string
    3. action
    4. the form action URL
    5. method
    6. post, get, put or delete
    7. html
    8. An array of javascript objects that define a supported tag (see below)
    9. enctype
    10. 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"
    }
    

    Keywords

    none

    Install

    npm i json2htmlform

    DownloadsWeekly Downloads

    0

    Version

    0.6.3

    License

    none

    Last publish

    Collaborators

    • paulatstepup