DHTMLX Docs & Samples Explorer

Usage Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
       <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
 
	<script src="codebase/dhtmlxcommon.js"></script>
	<script src="codebase/dhtmlxform.js"></script>
</head>
 
<body onload="doOnLoad()">
	<div id="form_container" ></div>
	<script>
		var myForm, formData;
		function doOnLoad() {
formData = [
				{type: "settings", position: "label-right"},
				{type:"fieldset", inputWidth:240, label:"General settings", list:[
				{type:"label", label:"Language"},
				{type: "select", label: "Program language", position:"label-left", options:[
						{text: "English", value: "english", selected:true},
						{text: "Italiano", value: "italian"},
						{text: "Русский", value: "russian"}
				]},
				{type: "select", label: "Session language", position:"label-left", options:[
						{text: "English", value: "english", selected:true},
						{text: "Italiano", value: "italian"},
						{text: "Русский", value: "russian"}
				]},
				{type:"label", label:"Common", labelHeight:17},
				{type:"checkbox", label:"Start when I start Windows"}, 
				{type:"checkbox", label:"Accept browser cookies"},
				{type:"checkbox", label:"Allow to be shown on the web"},
				{type:"label", label:"Display", labelHeight:17},
				{type:"checkbox", label:"Technical info"},
				{type:"checkbox", label:"Notifications"},
				{type:"checkbox", label:"Profile picture"},
				{type:"checkbox", label:"Time"},
				{type: "block", list:[
						{type: "button", value: "Save"},
						{type:"newcolumn"},
						{type: "button", value: "Reset", position:"absolute", inputLeft:15}
				]}
				]},
				{type:"newcolumn"}, 
				{type:"fieldset", label:"Color settings",  list:[
				{type: "block", inputWidth: 240, list:[
					{type: "label", label: "Internal"},
					{type: "radio", name: "n1", value: 1, label: "Red"},
					{type: "radio", name: "n1", value: 2, label: "Orange"},
					{type: "radio", name: "n1", value: 3, label: "Yellow"},
					{type: "radio", name: "n1", value: 4, label: "Green"},
					{type: "radio", name: "n1", value: 5, label: "Blue"},
					{type: "newcolumn"},
					{type: "label", label: "External"},
					{type: "radio", name: "n2", value: 1, label: "Red"},
					{type: "radio", name: "n2", value: 2, label: "Orange"},
					{type: "radio", name: "n2", value: 3, label: "Yellow"},
					{type: "radio", name: "n2", value: 4, label: "Green"},
					{type: "radio", name: "n2", value: 5, label: "Blue"},
					{type: "newcolumn"},
					{type: "label", label: "Border"},
					{type: "radio", name: "n3", value: 1, label: "Red"},
					{type: "radio", name: "n3", value: 2, label: "Orange"},
					{type: "radio", name: "n3", value: 3, label: "Yellow"},
					{type: "radio", name: "n3", value: 4, label: "Green"},
					{type: "radio", name: "n3", value: 5, label: "Blue"}
				]},
				{type: "block", inputWidth: 220, list:[
				{type:"label", label:"Apply to"},
				{type: "checkbox", label:"All items", position:"label-right", list:[
					{type:"checkbox", label:"All the specified colors"},
					{type: "checkbox", label:"Individual colors", position:"label-right", list:[
							{type: "radio", value: "by_pages", label: "Internal Color"},
							{type: "radio", value: "by_pages", label: "External Color"},
							{type: "radio", value: "by_pages", label: "Border Color"}
					]}
				]},
				{type: "checkbox", label:"Only the current item", position:"label-right"}
				]},
				{type: "block", inputWidth: 240, list:[
				{type: "button", value: "Save"},
				{type:"newcolumn"},
				{type: "button", value: "Reset", position:"absolute", inputLeft:35}
				]}
				]}
			];
 
			myForm = new dhtmlXForm("form_container", formData);
		}	
		</script>
 
</body>
</html>