diff --git a/demos/form/index.html b/demos/form/index.html
new file mode 100644
index 00000000..f064b5a4
--- /dev/null
+++ b/demos/form/index.html
@@ -0,0 +1,10 @@
+
+
+
+ OxJS Form Demo
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demos/form/js/form.js b/demos/form/js/form.js
new file mode 100644
index 00000000..8d2d414f
--- /dev/null
+++ b/demos/form/js/form.js
@@ -0,0 +1,107 @@
+Ox.load('UI', {debug: true}, function() {
+
+ var $items = [
+ Ox.Input({
+ id: 'name',
+ label: 'Name',
+ labelWidth: 64,
+ width: 240
+ }),
+ Ox.Input({
+ id: 'geoname',
+ label: 'Geoname',
+ labelWidth: 64,
+ width: 240
+ }),
+ Ox.ArrayInput({
+ id: 'alternativeNames',
+ label: 'Alternative Names',
+ max: 10,
+ //sort: true,
+ values: [],
+ width: 240
+ }),
+ Ox.Input({
+ decimals: 8,
+ id: 'lat',
+ label: 'Latitude',
+ labelWidth: 80,
+ max: Ox.MAX_LATITUDE,
+ min: Ox.MIN_LATITUDE,
+ type: 'float',
+ width: 240
+ }),
+ Ox.Input({
+ decimals: 8,
+ id: 'lng',
+ label: 'Longitude',
+ labelWidth: 80,
+ max: 180,
+ min: -180,
+ type: 'float',
+ width: 240
+ })
+ ],
+ $bar = Ox.Bar({
+ size: 24
+ }),
+ $button = Ox.Button({
+ id: 'submit',
+ title: 'check',
+ type: 'image'
+ })
+ .css({
+ float: 'right',
+ margin: '4px'
+ })
+ .bindEvent({
+ click: function() {
+ $foo.html(JSON.stringify($form.values()))
+ }
+ })
+ .appendTo($bar),
+ $container = Ox.Container(),
+ $foo = Ox.Element(),
+ $form = Ox.Form({
+ items: $items
+ })
+ .css({
+ padding: '8px'
+ })
+ .appendTo($container);
+
+ Ox.SplitPanel({
+ elements: [
+ {
+ collapsible: true,
+ element: Ox.SplitPanel({
+ elements: [
+ {
+ element: $container
+ },
+ {
+ element: $bar,
+ size: 24
+ }
+ ],
+ orientation: 'vertical'
+ })
+ .bindEvent({
+ resize: function(foo, size) {
+ $items.forEach(function($item) {
+ $item.options({width: size - 16});
+ });
+ }
+ }),
+ resizable: true,
+ resize: [128, 256, 384],
+ size: 256
+ },
+ {
+ element: $foo
+ }
+ ],
+ orientation: 'horizontal'
+ }).appendTo(Ox.UI.$body);
+
+});
\ No newline at end of file