├── DataSaver.jquery.json
├── README.md
├── jquery.DataSaver.min.js
├── jquery.DataSaver.js
└── index.html


/DataSaver.jquery.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "DataSaver",
 3 |     "title": "jQuery DataSaver",
 4 |     "description": "jQuery plugin for save your data from form fields in the web storage.",
 5 |     "keywords": [
 6 |         "data",
 7 |         "save",
 8 |         "storage",
 9 |         "localstorage",
10 |         "form",
11 |         "fields"
12 |     ],
13 |     "version": "0.1.2",
14 |     "author": {
15 |         "name": "Seleznev Alexander",
16 |         "email": "absenteg@gmail.com",
17 |         "url": "http://whoisabsent.ru"
18 |     },
19 |     "licenses": [
20 |         {
21 |             "type": "MIT",
22 |             "url": "http://www.opensource.org/licenses/mit-license.php "
23 |         }
24 |     ],
25 |     "homepage": "https://github.com/absentik/DataSaver",
26 |     "docs": "https://github.com/absentik/DataSaver/wiki",
27 |     "bugs": "https://github.com/absentik/DataSaver/issues",
28 |     "dependencies": {
29 |         "jquery": ">=1.7"
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | DataSaver
 2 | =======
 3 | 
 4 | ## ABOUT
 5 | The jQuery plugin allows you to save data from form fields in the web storage.
 6 | 
 7 | This saves users from  a situation when they lost all data entered into the form. This can happen due to a crash browser, disconnection, reload the page, etc.
 8 | 
 9 | ### Browser Support 
10 | Plugin is supported in Internet Explorer 8+, Firefox 3.5+, Opera 10.5+, Chrome 4.0+, and Safari 4.0+.
11 | 
12 | ## USAGE
13 | DataSaver plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header.
14 | 
15 | <pre>
16 | &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
17 | &lt;script src="js/jquery.DataSaver.js">&lt;/script&gt;
18 | </pre>
19 | 
20 | Select elements whose data you want to save.
21 | 
22 | <pre>&lt;textarea class="saveme"&gt; &lt;/textarea&gt;</pre>
23 | 
24 | After it, call the jQuery DataSaver plugin.
25 | 
26 | <pre>$('.saveme').DataSaver();</pre>
27 | 
28 | ### Options:
29 | You can pass an options object in plugin init method.
30 | * `timeout` : Automatic save interval data (in milliseconds). If zero, it is not used (Default: `0`);
31 | * `events` : List of events that cause data save. If `undefined` or `''`, it is not used (Default: `change`);
32 | * `keyUrlAttrs` : Array of properties `window.location` object for building key (Default: `["host", "pathname"]`);
33 | * `keyExtra` : Function that return a string that is used for building key (Default: `function() { return ""; }`).
34 | 
35 | <pre>
36 | $('.saveme').DataSaver({
37 | 	timeout: 1000, 
38 | 	events: "change keyup",
39 | 	keyUrlAttrs: ["host", "pathname", "search"],
40 | 	keyExtra: function() { 
41 | 		return $('#linkedfield').val(); 
42 | 	}
43 | });
44 | </pre>
45 | 
46 | ### Methods:
47 | You can call some methods. Just pass their name.
48 | * `save` : Save the data in web storage;
49 | * `load` : Load the data from web storage;
50 | * `remove` : Remove the data from web storage; 
51 | * `stop` : Stop the DataSaver. 
52 | 
53 | <pre>$('.saveme').DataSaver('remove');</pre>
54 | 
55 | ### Events: 
56 | You can listen DataSaver events. 
57 | * `DataSaver_start`
58 | * `DataSaver_stop`
59 | * `DataSaver_save`
60 | * `DataSaver_load`
61 | * `DataSaver_remove`
62 | 
63 | You can also get localStorage key (`DataSaver_key`) and value: 
64 | 
65 | <pre>
66 | $(document).on("DataSaver_save DataSaver_load DataSaver_remove", function(e) {
67 |     console.log(e.type);
68 |     console.log(e.target.DataSaver_key + " : " + localStorage[e.target.DataSaver_key]);
69 |     console.log("");
70 | });
71 | </pre>
72 | 
73 | ## EXAMPLE
74 | [View example](http://htmlpreview.github.io/?https://github.com/absentik/DataSaver/blob/master/index.html#example_form)
75 | 


--------------------------------------------------------------------------------
/jquery.DataSaver.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * jQuery DataSaver plugin 0.1.2 
 3 |  * https://github.com/absentik/DataSaver
 4 |  * 
 5 |  * Author: Seleznev Alexander (ABSENT) 
 6 |  * Email: absenteg@gmail.com 
 7 |  * Website: http://whoisabsent.ru 
 8 |  *  
 9 |  * Licensed under the MIT license. 
10 |  * http://www.opensource.org/licenses/mit-license.php 
11 |  */
12 | 
13 | ;(function(b,e,g,h){function d(a,c){this.element=a;this._defaults=f;this._name="DataSaver";this.options=b.extend({},f,c);this.action="string"===typeof c?c:"default";this.getkey();this.init()}var f={timeout:0,events:"change",keyUrlAttrs:["host","pathname"],keyExtra:function(){return""}};d.prototype.getkey=function(){var a=this.element.DataSaver_key;if("undefined"===typeof a){var c={};b.each(this.options.keyUrlAttrs,function(a,b){e.location.hasOwnProperty(b)&&(c[b]=e.location[b])});a={tagName:this.element.tagName,
14 | name:this.element.name};b(this.element).is(":input")&&(a.type=this.element.type);b(this.element).is(":radio")||(a.id=this.element.id,a.className=this.element.className);a=["DataSaver",JSON.stringify(c),JSON.stringify(a),this.options.keyExtra()].join(".");this.element.DataSaver_key=a}return a};d.prototype.load=function(){var a=this.getkey(),a=localStorage[a];if(null!=a)switch(this.element.tagName){case "INPUT":switch(b(this.element).attr("type").toUpperCase()){case "CHECKBOX":b(this.element).prop("checked",
15 | "true"===a);break;case "RADIO":b("input[type=radio][name="+this.element.name+"][value="+a+"]").prop("checked",!0);break;default:b(this.element).val(a)}break;case "SELECT":a=a.split(",");b(this.element).val(a);break;case "TEXTAREA":b(this.element).val(a)}return b(this.element).trigger("DataSaver_load")};d.prototype.save=function(){var a=this.getkey(),c;switch(this.element.tagName){case "INPUT":switch(b(this.element).attr("type").toUpperCase()){case "CHECKBOX":c=b(this.element).prop("checked");break;
16 | case "RADIO":c=b(this.element).val();break;default:c=b(this.element).val()}break;case "SELECT":c=b(this.element).val();break;case "TEXTAREA":c=b(this.element).val()}"undefined"!==typeof c&&(localStorage[a]=c);return b(this.element).trigger("DataSaver_save")};d.prototype.remove=function(){var a=this.getkey();localStorage.removeItem(a);return b(this.element).trigger("DataSaver_remove")};d.prototype.start=function(){var a=this;this.stop();this.load();"undefined"!==typeof this.options.events&&0<this.options.events.length&&
17 | (this.options.events=this.options.events.split(",").join(" "),this.element.DataSaver_events=this.options.events,b(this.element).on(this.options.events,function(){a.save()}));"number"===typeof this.options.timeout&&0<this.options.timeout&&(this.element.DataSaver_timeout=setInterval(function(){a.save()},this.options.timeout));return b(this.element).trigger("DataSaver_start")};d.prototype.stop=function(){"undefined"!==typeof this.element.DataSaver_events&&b(g.body).off(this.element.DataSaver_events);
18 | "undefined"!==typeof this.element.DataSaver_timeout&&clearInterval(this.element.DataSaver_timeout);return b(this.element).trigger("DataSaver_stop")};d.prototype.init=function(){switch(this.action){case "load":return this.load();case "save":return this.save();case "remove":return this.remove();case "stop":return this.stop();default:return this.start()}};b.fn.DataSaver=function(a){"localStorage"in e&&null!==e.localStorage||b.error("Your browser doesn't support localStorage.");return this.each(function(){b.data(this,
19 | "plugin_DataSaver",new d(this,a))})}})(jQuery,window,document);
20 | 


--------------------------------------------------------------------------------
/jquery.DataSaver.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * jQuery DataSaver plugin 0.1.2
  3 |  * https://github.com/absentik/DataSaver
  4 |  *
  5 |  * Author: Seleznev Alexander (ABSENT)
  6 |  * Email: absenteg@gmail.com
  7 |  * Website: http://whoisabsent.ru
  8 |  *
  9 |  * Licensed under the MIT license.
 10 |  * http://www.opensource.org/licenses/mit-license.php
 11 |  */
 12 | 
 13 | ;(function($, window, document, undefined){
 14 | 
 15 | 	var pluginName = "DataSaver";
 16 | 	var defaults = {
 17 | 		timeout: 0,
 18 | 		events: "change",
 19 | 		keyUrlAttrs: ["host", "pathname"],
 20 | 		keyExtra: function() { 
 21 | 			return "";
 22 | 		}
 23 | 	}
 24 | 
 25 | 	function DataSaver(element, options) {
 26 | 		this.element = element;
 27 | 		this._defaults = defaults;
 28 | 		this._name = pluginName;
 29 | 		this.options = $.extend({}, defaults, options);
 30 | 		this.action = typeof options === "string" ? options : "default";
 31 | 
 32 | 		this.getkey();
 33 | 		this.init();
 34 | 	}
 35 | 
 36 | 	//Generate and return DataSaver_key for element
 37 | 	DataSaver.prototype.getkey = function() {
 38 | 		var keyName = pluginName + "_key";
 39 | 		var key = this.element[keyName];
 40 | 
 41 | 		if (typeof key === "undefined") {
 42 | 			var url = {};
 43 | 			$.each(this.options.keyUrlAttrs, function(index, value){
 44 | 				if (window.location.hasOwnProperty(value)) {
 45 | 					url[value] = window.location[value];
 46 | 				}
 47 | 			});
 48 | 
 49 | 			var node = {
 50 | 				tagName: this.element.tagName,
 51 | 				name: this.element.name
 52 | 			}
 53 | 			if ($(this.element).is(":input")) {
 54 | 				node.type = this.element.type;
 55 | 			}
 56 | 			if (!$(this.element).is(":radio")) {
 57 | 				node.id = this.element.id;
 58 | 				node.className = this.element.className;
 59 | 			}
 60 | 
 61 | 			key = [pluginName, JSON.stringify(url), JSON.stringify(node), this.options.keyExtra()].join(".");
 62 | 			this.element[keyName] = key;
 63 | 		}
 64 | 
 65 | 		return key;
 66 | 	};
 67 | 
 68 | 	//Load data from localStorage
 69 | 	DataSaver.prototype.load = function() {
 70 | 		var key = this.getkey();
 71 | 		var val = localStorage[key];
 72 | 
 73 | 		if (val != null) {
 74 | 			switch (this.element.tagName) {
 75 | 				case "INPUT":
 76 | 					var type = $(this.element).attr("type").toUpperCase();
 77 | 					switch (type) {
 78 | 						case "CHECKBOX":
 79 | 							$(this.element).prop('checked', (val === "true"));
 80 | 						break;
 81 | 
 82 | 						case "RADIO":
 83 | 							$("input[type=radio][name=" + this.element.name + "]" + "[value=" + val + "]").prop('checked', true);
 84 | 						break;
 85 | 
 86 | 						default:
 87 | 							$(this.element).val(val);
 88 | 						break;
 89 | 					}
 90 | 				break;
 91 | 
 92 | 				case "SELECT":
 93 | 					val = val.split(','); //for multiple select
 94 | 					$(this.element).val(val);
 95 | 				break;
 96 | 
 97 | 				case "TEXTAREA":
 98 | 					$(this.element).val(val);
 99 | 				break;
100 | 			}
101 | 		}
102 | 
103 | 		return $(this.element).trigger(pluginName + "_load");
104 | 	};
105 | 
106 | 	//Save data in localStorage
107 | 	DataSaver.prototype.save = function() {
108 | 		var key = this.getkey();
109 | 		var val;
110 | 
111 | 		switch (this.element.tagName) {
112 | 			case "INPUT":
113 | 				var type = $(this.element).attr("type").toUpperCase();
114 | 				switch (type) {
115 | 					case "CHECKBOX":
116 | 						val = $(this.element).prop('checked');
117 | 					break;
118 | 
119 | 					case "RADIO":
120 | 						val = $(this.element).val(); //keys for all radio[name] should match
121 | 					break;
122 | 
123 | 					default:
124 | 						val = $(this.element).val();
125 | 					break;
126 | 				}
127 | 			break;
128 | 
129 | 			case "SELECT":
130 | 				val = $(this.element).val();
131 | 			break;
132 | 
133 | 			case "TEXTAREA":
134 | 				val = $(this.element).val();
135 | 			break;
136 | 		}
137 | 
138 | 		if (typeof val !== "undefined") {
139 | 			localStorage[key] = val;
140 | 		}
141 | 
142 | 		return $(this.element).trigger(pluginName + "_save");
143 | 	};
144 | 
145 | 	//Remove data in localStorage
146 | 	DataSaver.prototype.remove = function() {
147 | 		var key = this.getkey();
148 | 		localStorage.removeItem(key);
149 | 
150 | 		return $(this.element).trigger(pluginName + "_remove");
151 | 	};
152 | 
153 | 	//Start the DataSaver: load data and bind actions
154 | 	DataSaver.prototype.start = function() {
155 | 		var it = this;
156 | 		this.stop();
157 | 		this.load();
158 | 
159 | 		if (typeof this.options.events !== "undefined" && this.options.events.length > 0) {
160 | 			this.options.events = this.options.events.split(',').join(' ');
161 | 			this.element[pluginName + "_events"] = this.options.events;
162 | 			//$(document.body).on(this.options.events, this.element, function() {
163 | 			$(this.element).on(this.options.events, function() {
164 | 				it.save();
165 | 			});
166 | 		}
167 | 
168 | 		if (typeof this.options.timeout === "number" && this.options.timeout > 0) {
169 | 			this.element[pluginName + "_timeout"] = setInterval(function() {
170 | 				it.save();
171 | 			}, this.options.timeout);
172 | 		}
173 | 
174 | 		return $(this.element).trigger(pluginName + "_start");
175 | 	};
176 | 
177 | 	//Stop the DataSaver: unbind actions
178 | 	DataSaver.prototype.stop = function() {
179 | 		if (typeof this.element[pluginName + "_events"] !== "undefined") {
180 | 			$(document.body).off(this.element[pluginName + "_events"]);
181 | 		}
182 | 		if (typeof this.element[pluginName + "_timeout"] !== "undefined") {
183 | 			clearInterval(this.element[pluginName + "_timeout"]);
184 | 		}
185 | 
186 | 		return $(this.element).trigger(pluginName + "_stop");
187 | 	};
188 | 
189 | 
190 | 	DataSaver.prototype.init = function() {
191 | 		switch (this.action) {
192 | 			case "load":
193 | 				return this.load();
194 | 			break;
195 | 			case "save":
196 | 				return this.save();
197 | 			break;
198 | 			case "remove":
199 | 				return this.remove();
200 | 			break;
201 | 			case "stop":
202 | 				return this.stop();
203 | 			break;
204 | 			default:
205 | 				return this.start();
206 | 			break;
207 | 		}
208 | 	};
209 | 
210 | 
211 | 	$.fn[pluginName] = function (options) {
212 | 		if (!('localStorage' in window && window['localStorage'] !== null)) {
213 | 			$.error("Your browser doesn't support localStorage.");
214 | 		}
215 | 
216 | 		return this.each(function () {
217 | 			$.data(this, 'plugin_' + pluginName, new DataSaver(this, options));
218 | 		});
219 | 	}
220 | 
221 | })(jQuery, window, document);
222 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="utf-8">
  5 | 	<meta name="author" content="Absent">
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 | 
  8 | 	<title>DataSaver - jQuery plugin for save your data</title>
  9 | 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 10 | 	<script src="jquery.DataSaver.js"></script>
 11 | 	
 12 | 	<style type="text/css">
 13 | 		body, html {padding: 0px; margin: 0px;}
 14 | 		a {color: #3366CC;}
 15 | 		.wrapper {width:900px; margin: 0 auto; font: normal normal 400 100%/1.5em georgia, serif; color: #222;}
 16 | 		.wrapper h1 {font: normal 600%/100% georgia, serif; text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01); margin: 0 0 5px 0; text-align: center;}
 17 | 		.wrapper h2 {font: normal 200%/100% georgia, serif; text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01); margin: 0 0 5px 0; text-transform: uppercase; }
 18 | 		.wrapper h3 {font: normal 150%/100% georgia, serif; text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01); margin: 0 0 5px 0;}
 19 | 		.wrapper hr {border: none; border-top: 1px solid #ddd;}
 20 | 		.head p {font: normal 145%/1em georgia, serif; text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01); text-align: center;}
 21 | 		.buttons a {display: inline-block;  background: #ddd; color: #111; width: 39.5%; margin: 0 5%; border-radius: 3px; text-align: center; line-height: 2.6em; text-decoration: none;}
 22 | 		.buttons a:hover {background: #3366CC; color: #fff;}
 23 | 		.buttons { clear: both; margin: 5px 0px 20px 0px; }
 24 | 		.wrapper pre {font: normal 87.5%/1.2em monospace, sans-serif; padding: 15px 30px 0px 30px; margin: 0; background: #eee; border-radius: 3px; display: block; overflow: auto;}
 25 | 		
 26 | 		.example {margin: 0px auto; border-left: 1px solid #ddd; padding-left: 20px;}
 27 | 		.example input[type=text], .example input[type=number], .example input[type=password] {width: 100px; padding: 5px; margin: 0px 10px 0px 0px; border: 1px solid #ddd; border-radius: 3px;}
 28 | 		.example input[type=date] {width: 150px; padding: 5px; margin: 0px 10px 0px 0px; border: 1px solid #ddd; border-radius: 3px;}
 29 | 		.example select {width: 350px; padding: 5px; border: 1px solid #ddd; border-radius: 3px;}
 30 | 		.example textarea {width: 700px; padding: 5px; border: 1px solid #ddd; border-radius: 3px;}
 31 | 
 32 |     </style>
 33 | 	
 34 |     <script type="text/javascript">
 35 | 		$(document).ready(function() {
 36 | 			//Log DataSaver events (before DataSaver start!)
 37 | 			$(document).on("DataSaver_start DataSaver_stop DataSaver_save DataSaver_load DataSaver_remove", function(e) {
 38 | 				console.log(e.type);
 39 | 				//console.log(e.target.DataSaver_key + " : " + localStorage[e.target.DataSaver_key]);
 40 | 				//console.log("");
 41 | 			});
 42 | 
 43 | 			//Save data for fields with class "save"
 44 | 			$("#example_form .save").DataSaver({ 
 45 | 				timeout: 0, 
 46 | 				events: "change keyup", 
 47 | 				keyUrlAttrs: ["host", "pathname", "search"]
 48 | 			});
 49 | 			
 50 | 			//Clear data after submit or reset "example_form"
 51 | 			$("#example_form").on("submit reset", function() {
 52 | 				$('#example_form .save').DataSaver("remove");
 53 | 			});
 54 | 
 55 | 		});
 56 | 		
 57 |     </script>
 58 | 	
 59 | </head>
 60 | <body>
 61 | 	<div class="wrapper">
 62 | 		<div class="head">
 63 | 			<h1>DataSaver</h1>
 64 | 			<p>jQuery plugin for save your data.</p>
 65 | 			<div class="buttons">
 66 | 				<a href="https://github.com/absentik/DataSaver/archive/master.zip">Download</a>
 67 | 				<a href="https://github.com/absentik/DataSaver">Github Page</a>
 68 | 			</div>
 69 | 		</div>
 70 | 		<br>
 71 | 		<h2>About</h2>
 72 | 		<p>The jQuery plugin allows you to save data from form fields in the web storage.</p>
 73 | 		<p>This saves users from  a situation when they lost all data entered into the form. This can happen due to a crash browser, disconnection, reload the page, etc.</p>
 74 | 		<br>
 75 | 		<h3>Browser Support:</h3>
 76 | 		<p>Plugin is supported in Internet Explorer 8+, Firefox 3.5+, Opera 10.5+, Chrome 4.0+, and Safari 4.0+.</p>
 77 | 		<br>
 78 | 		<h2>Usage</h2>
 79 | 		<p>DataSaver plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header.</p>
 80 | 		<pre>
 81 | &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
 82 | &lt;script src="js/jquery.DataSaver.js">&lt;/script&gt;
 83 | 		</pre>
 84 | 		<br>
 85 | 		<p>Select elements whose data you want to save.</p>
 86 | 		<pre>
 87 | &lt;input type="text" id="field" class="saveme" /&gt; 
 88 | &lt;textarea class="saveme"&gt; &lt;/textarea&gt;
 89 | 		</pre>
 90 | 		<br>
 91 | 		<p>After it, call the jQuery DataSaver plugin. </p>
 92 | 		<pre>
 93 | $('.saveme').DataSaver();	
 94 | 		</pre>			
 95 | 		<br>
 96 | 		<h3>Options:</h3>
 97 | 		<p>You can pass an options object in plugin init method.</p>
 98 | 		<ul>
 99 | 			<li><b>timeout</b> : Automatic save interval data (in milliseconds). If zero, it is not used <i>(Default: 0)</i>;</li>
100 | 			<li><b>events</b> : List of events that cause data save. If "undefined" or "", it is not used <i>(Default: "change")</i>;</li>
101 | 			<li><b>keyUrlAttrs</b> : Array of properties "window.location" object for building key <i>(Default: ["host", "pathname"])</i>;</li>
102 | 			<li><b>keyExtra</b> : Function that return a string that is used for building key <i>(Default: function() { return ""; })</i>.</li>
103 | 		</ul>
104 | 		<pre>
105 | $('.saveme').DataSaver({
106 |     timeout: 1000, 
107 |     events: "change keyup",
108 |     keyUrlAttrs: ["host", "pathname", "search"],
109 |     keyExtra: function() { 
110 |         return $('#linkedfield').val(); 
111 |     }
112 | });
113 | 		</pre>
114 | 		<br>
115 | 		<br>
116 | 		<h3>Methods:</h3>
117 | 		<p>You can call some methods. Just pass their name.</p>
118 | 		<ul>
119 | 			<li><b>save</b> : Save the data in web storage;</li>
120 | 			<li><b>load</b> : Load the data from web storage;</li>
121 | 			<li><b>remove</b> : Remove the data from web storage (For example, after submit the form);</li>
122 | 			<li><b>stop</b> : Stop the DataSaver.</li>
123 | 		</ul>
124 | 		<pre>
125 | $('.saveme').DataSaver('remove');
126 | 		</pre>
127 | 		<br>
128 | 		<br>
129 | 		<h3>Events:</h3>
130 | 		<p>You can listen DataSaver events.</p>
131 | 		<ul>
132 | 			<li>DataSaver_start</li>
133 | 			<li>DataSaver_stop</li>
134 | 			<li>DataSaver_save</li>
135 | 			<li>DataSaver_load</li>
136 | 			<li>DataSaver_remove</li>
137 | 		</ul>
138 | 		<p>You can also get localStorage key (<b>DataSaver_key</b>) and value:</p>
139 | 		<pre>
140 | $(document).on("DataSaver_save DataSaver_load DataSaver_remove", function(e) {
141 | 	console.log(e.type);
142 | 	console.log(e.target.DataSaver_key + " : " + localStorage[e.target.DataSaver_key]);
143 | 	console.log("");
144 | });
145 | 		</pre>
146 | 		<br>
147 | 		<br>
148 | 		<form id="example_form" method="post">
149 | 			<h2>Example:</h2>
150 | 			<div class="example">
151 | 				<p><i>Fill and reload the page.</i></p>
152 | 				<p>Input: 
153 | 					<input type="text" id="text" name="text" class="save" />
154 | 					<input type="password" id="password" name="password" class="save" />
155 | 					<input type="number" id="number" name="number" class="save" />
156 | 					<input type="date" id="date" name="date" class="save" />
157 | 					<input type="range" id="range" name="range" class="save" />
158 | 				</p>
159 | 				<p>Radio: 
160 | 					<input type="radio" name="radio" class="save" value="one"> One 
161 | 					<input type="radio" name="radio" class="save" value="two"> Two 
162 | 					<input type="radio" name="radio" class="save" value="three"> Three
163 | 				</p>
164 | 				<p>Select: 
165 | 					<select class="save" id="select" name="select">
166 | 						<option selected="selected"></option>
167 | 						<option value="1">Option 1</option>
168 | 						<option value="2">Option 2</option>
169 | 						<option value="3">Option 3</option>
170 | 						<option value="4">Option 4</option>
171 | 					</select>
172 | 				</p>
173 | 				<p>Multiple select: <br>
174 | 					<select class="save" id="select_multiple" name="select_multiple" multiple="multiple">
175 | 						<option value="1">Option 1</option>
176 | 						<option value="2" selected="selected">Option 2</option>
177 | 						<option value="3" selected="selected">Option 3</option>
178 | 						<option value="4">Option 4</option>
179 | 						<option value="5">Option 5</option>
180 | 					</select>
181 | 				</p>
182 | 				<p>Checkbox: 
183 | 					<input id="check1" type="checkbox" class="save" name="check1" checked="checked" />Check  
184 | 					<input id="check2" type="checkbox" class="save" name="check2" />Check  
185 | 					<input id="check3" type="checkbox" class="save" name="check3" />Check  
186 | 				</p>
187 | 				<p>Textarea: <br>
188 | 					<textarea class="save" rows="7"></textarea>
189 | 				</p>
190 | 				<p>
191 | 					<input type="submit" value="Submit & Clear"> 
192 | 					<input type="reset" value="Reset"> 
193 | 				<p>
194 | 			</div>
195 | 		</form>
196 | 		<br>
197 | 		<hr>
198 | 		<p><a href="http://whoisabsent.ru" title="Created by" target="_blank">ABSENT</a>, 2014</p>
199 | 	</div>
200 | </body>
201 | </html>
202 | 


--------------------------------------------------------------------------------