All components dhtmlxForm Init on page Material skin

Material skin

</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Material skin</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script src="../../../codebase/ext/swfobject.js"></script>
	<style>
		/* enabled, not checked */
		.dhxform_obj_material div.dhxform_img.btn2state_0 {
			background-image: url("../common/button2state/material/toggle_off.png");
			width: 42px;
			height: 24px;
		}
		/* enabled, checked */
		.dhxform_obj_material div.dhxform_img.btn2state_1 {
			background-image: url("../common/button2state/material/toggle_on.png");
			width: 42px;
			height: 24px;
		}
		/* disabled, not checked */
		.dhxform_obj_material div.disabled div.dhxform_img.btn2state_0 {
			background-image: url("../common/button2state/material/toggle_off_dis.png");
			width: 42px;
			height: 24px;
		}
		/* disabled, checked */
		.dhxform_obj_material div.disabled div.dhxform_img.btn2state_1 {
			background-image: url("../common/button2state/material/toggle_on_dis.png");
			width: 42px;
			height: 24px;
		}
	</style>
	<script>

		var myForm, formData;

		function doOnLoad() {

			formData = [
				{type: "settings", position: "label-right", labelWidth: "auto", inputWidth: 130},
				{type: "label", label: "Material Skin"},
				{type: "btn2state", label: "Sync data with FTP server", inputWidth: 42, checked: true, list:[
					{type: "settings", labelWidth: 90, inputWidth: 200, position: "label-left"},
					{type: "input", name: "ftp_server", label: "Server", value: "ftp://backup.mydomain.com"},
					{type: "input", name: "ftp_login", label: "Login", value: "user"},
					{type: "password", name: "ftp_pwd", label: "Password", value: "password"},
					{type: "select", name: "ftp_sync", label: "Sync every", options:[
						{value: "day", text: "day"},
						{value: "2ndday", text: "second day"},
						{value: "friday", text: "friday"},
						{value: "2ndfriday", text: "second friday", selected: true},
						{value: "Month", text: "last friday in a month"}
					]},
					{type: "checkbox", name: "ftp_log", value: 1, label: "Enable log", checked: true}
				]},
				{type: "btn2state", label: "Init system hardware upgrade", inputWidth: 42, offsetTop: 10, checked: true, list: [
					//
					{type: "settings", labelWidth: 90, inputWidth: 100, position: "label-left"},
					{type: "calendar", dateFormat: "%Y-%m-%d", label: "Start Date", name: "reminder", enableTime: false, calendarPosition: "right", value:"2013-03-01" },
					{type: "select", label: "Duration", options:[
						{value: "day", text: "day"},
						{value: "week", text: "week", selected: true},
						{value: "2weeks", text: "two weeks"}
					]}
				]},
				{type: "btn2state", label: "Use custom UI colors", inputWidth: 42, checked: true, offsetTop: 10, list:[
					{type: "settings", labelWidth: "auto", inputWidth: "auto"},
					{type: "fieldset", label: "Font", inputWidth: 160, list: [
						{type: "radio", name: "fontcolor", label: "Black", checked: true},
						{type: "radio", name: "fontcolor", label: "Blue"},
						{type: "radio", name: "fontcolor", label: "Green"}
					]},
					{type: "newcolumn"},
					{type: "fieldset", label: "Background", inputWidth: 160, offsetLeft: 30, list:[
						{type: "radio", name: "bgcolor", label: "White", checked: true},
						{type: "radio", name: "bgcolor", label: "Yellow"},
						{type: "radio", name: "bgcolor", label: "Gray"}
					]}
				]},
				{type: "btn2state", label: "Custom font", inputWidth: 42, checked: true, offsetTop: 10, list:[
					{type: "combo", label: "", inputWidth: 120, options: [
						{value: "tahoma", text: "Tahoma"},
						{value: "arial", text: "Arial", selected: true},
						{value: "verdana", text: "Verdana"}
					]},
					{type: "newcolumn"},
					{type: "combo", label: "", inputWidth: 70, offsetLeft: 5, options: [
						{value: "12", text: "12px"},
						{value: "13", text: "13px"},
						{value: "14", text: "14px", selected: true}
					]}
				]},
				{type: "btn2state", label: "Upload new data", inputWidth: 42, checked: true, offsetTop: 10, list:[
					{type: "fieldset", label: "Files", inputWidth: 350, list:[
						{type: "upload", name: "myFiles", inputWidth: 330, url: "../07_uploader/php/dhtmlxform_item_upload.php", _swfLogs: "enabled", swfPath: "../../../codebase/ext/uploader.swf", swfUrl: "../../samples/07_uploader/php/dhtmlxform_item_upload.php"}
					]}
				]},
				{type: "block", width: "auto", offsetTop: 10, list:[
					{type: "button", value: "Save", offsetLeft: 50},
					{type: "newcolumn"},
					{type: "button", value: "Cancel", offsetLeft: 8}
				]}
			];
			myForm = new dhtmlXForm("myForm", formData);
			myForm.setFocusOnFirstActive();
		}
	</script>
</head>
<body onload="doOnLoad();">
	<div id="myForm"></div>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.