ݺߣ

ݺߣShare a Scribd company logo

Jformino

?
?
Kang-min Liu
Kang-min Liu

jFormino lightning talk for JUI conference Tokyo.

1 of 48
Download to read offline
jFormino Kang-min Liu gugod@gugod.org
jFormino
jQuery Form by Handlino
What does it do
Jformino
Dynamic Form Generator
Generate <form>
Simple Example $(quot;<div/>quot;) .attr({ id: quot;form1quot; }) .prependTo(document.body) .formino({ legend: quot;Test Purpose Formquot;, params: [ quot;field_onequot; ] });
Extended Example $(quot;<div/>quot;).attr({ id: quot;form1quot; }).prependTo(document.body) .formino({ legend: quot;Test Purpose Formquot;, params: [ // only give field name, with auto-generateed label. quot;field_onequot;, // manually assign a label { label: quot;Fooquot;, name: quot;foo_fieldquot; }, // with initial value { label: quot;Barquot;, name: quot;bar_fieldquot;, value: quot;42quot; }, // other types { name: quot;xyzquot;, label: quot;XYZquot;, type: quot;checkboxquot;, values: [ 42, 43, 44 ] } ] });
Google Map $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
Google Map $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
Google Map $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
Jformino
Form Element UI Binder
$(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] });
$(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] });
$(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] });
$(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] }); YUI Skin compatible CSS
Why we designed it
Requirement From Work
Dynamic Form
jQuery(quot;div#for-formquot;) .html(quot;<form><input/>...</formquot;);
Not Elegant
Whats the Problem ?
jQuery(quot;div#for-formquot;) .html(quot;<form><input/>...</formquot;);
Less Readable
Extend
Parameters
Declarative Syntax
Easy to Read ?
Very Extendable ?
All Parameters ?
Input Type
? Primitives ? text, password, select, radio, checkbox ? Extended ? Date, Time, Date+Time ? Google Map ? Date Range, Ranged Value
How to use it
$(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
$(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
$(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
$(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
$(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
$(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
$(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
$(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
$(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { type: 'googlemap', label: 'Standard Google Map ', name: 'm', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
$(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { type: 'googlemap', label: 'Standard Google Map ', name: 'm', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) longitude=121561499;latitude=25.08532
FYI
? : jFormino ? http://st.handlino.com/hdc/?jFormino ? contact: gugod@handlino.com gugod@gugod.org ? http://twitter.com/gugod ? http://twitter.com/handlino
Jformino

More Related Content

Jformino

  • 3. jQuery Form by Handlino
  • 8. Simple Example $(quot;<div/>quot;) .attr({ id: quot;form1quot; }) .prependTo(document.body) .formino({ legend: quot;Test Purpose Formquot;, params: [ quot;field_onequot; ] });
  • 9. Extended Example $(quot;<div/>quot;).attr({ id: quot;form1quot; }).prependTo(document.body) .formino({ legend: quot;Test Purpose Formquot;, params: [ // only give field name, with auto-generateed label. quot;field_onequot;, // manually assign a label { label: quot;Fooquot;, name: quot;foo_fieldquot; }, // with initial value { label: quot;Barquot;, name: quot;bar_fieldquot;, value: quot;42quot; }, // other types { name: quot;xyzquot;, label: quot;XYZquot;, type: quot;checkboxquot;, values: [ 42, 43, 44 ] } ] });
  • 10. Google Map $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
  • 11. Google Map $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
  • 12. Google Map $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
  • 14. Form Element UI Binder
  • 15. $(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] });
  • 16. $(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] });
  • 17. $(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] });
  • 18. $(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] }); YUI Skin compatible CSS
  • 34. ? Primitives ? text, password, select, radio, checkbox ? Extended ? Date, Time, Date+Time ? Google Map ? Date Range, Ranged Value
  • 36. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 37. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 38. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 39. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 40. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 41. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 42. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 43. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 44. $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { type: 'googlemap', label: 'Standard Google Map ', name: 'm', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
  • 45. $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { type: 'googlemap', label: 'Standard Google Map ', name: 'm', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) longitude=121561499;latitude=25.08532
  • 46. FYI
  • 47. ? : jFormino ? http://st.handlino.com/hdc/?jFormino ? contact: gugod@handlino.com gugod@gugod.org ? http://twitter.com/gugod ? http://twitter.com/handlino