DHTMLX Docs & Samples Explorer

JSON configuration

var formData = [
	{type: "radio", name: "choose", value: "online", label: "Will enjoy the online demo"},
	{type: "radio", name: "choose", value: "senddisk", label: "Please send me disk", checked: true, list:[
	{type: "checkbox", name: "bootleg", value: "yes", label: "Insert bootleg", checked: true},
		{type: "checkbox", name: "lirycs", value: "jaja", label: "Lyrics if possible", checked: true},
		{type: "label", label: "Payment"},
		{type: "radio", name: "paymenttype", value:"creditcard", label:"Credit Card", list:[
			{type: "input", name: "cardnumber", value: "XXXX-XXXX-XXXX-XXXX", label:"Card Number"},
			{type: "input", name: "cardkey", value: "XXXX", label: "Key"}
		]},
		{type: "radio", name: "paymenttype", value:"cash", label:"Cash", checked: true},
		{type: "label", label: "Currency"},
		{type: "radio", name: "currencytype", value: "dollar", label: "U. S. Dollars", checked: true},
		{type: "radio", name: "currencytype", value: "euro", label :"Euro"},
		{type: "radio", name: "currencytype", value: "brb", label: "Belarusian Rubel"},
		{type: "select", name: "mediatype", label: "Select Media Type", options:[
			{value: "1", text: "CD 700Mb", list:[
				{type: "checkbox", name: "overburn", value: "yes_1", label: "Overburn", checked: true}
			]},
			{value: "2", text: "DVD5 4.4Gb", list:[
				{type: "checkbox", name: "lightscribe", value: "yes", label: "Light Scribe", checked: true},
				{type: "checkbox", name: "labelflash", value: "yes", label: "Label Flash", checked: false, list:[
					{type: "radio", name: "labelflash_radio", value: "required", label: "Required", checked: true},
					{type: "radio", name: "labelflash_radio", value: "not_mandatory", label: "Not bad option"}
				]}
			]},
			{value: "2", text: "DVD5 4.4Gb"},
			{value: "3", text: "DVD9 8.6Gb", selected: true},
			{value: "4", text: "Blue-Ray 24Gb"}
		]},
		{type: "select", name: "audioquality", label: "Select Audio Quality", options:[
			{value: "1", text: "2.0 16bit/128kbps"},
			{value: "2", text: "2.1 16bit/334kbps"},
			{value: "3", text: "5.1 32bit/448kbps", selected: true}
		]},
		{type: "select", name: "videoquality", label: "Select Video Quality", options:[
			{value: "1", text: "DVD MPEG-2", selected: true},
			{value: "2", text: "DivX"},
			{value: "3", text: "XviD"}
		]},
		{type: "input", name: "comments", label: "Comments", value: "Some Comments", rows: 3}
	]},
	{type: "hidden", name: "hiden_data", value: "some_value"},
	{type: "file", name: "my_file", label: "Schoose file"},
	{type: "button", value: "Submit"}
];

Each item-object can have 'bind' property to define binding or 'validate' property to define validation rules.
Items of 'select' controls can have 'connector' property to load options.