https://github.com/node4good/forma
Javascript client side <form> generator
https://github.com/node4good/forma
Last synced: 6 months ago
JSON representation
Javascript client side <form> generator
- Host: GitHub
- URL: https://github.com/node4good/forma
- Owner: node4good
- Created: 2013-07-11T17:54:32.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2013-08-28T16:14:20.000Z (almost 13 years ago)
- Last Synced: 2025-08-12T22:56:38.294Z (10 months ago)
- Language: JavaScript
- Size: 375 KB
- Stars: 6
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[Forma](http://empeeric.github.io/forma/) - Client-side form generator
=======
> forma, formae; (f.); form, figure, shape; beautiful shape, beauty (-- Latin-English Dictionary)
Quick and easy javascript form builder. May you never have to write boring, repetitive markup again.
### [Example](http://empeeric.github.io/forma/)
```js
/*
Just declare your schema, we'll do the rest
*/
var form = new Forma({
// simplest: just declare name and type
username: 'text',
password: 'password',
// or you can have full control
where: {
type: 'text',
value: 'Shine',
required: true, // jQuery.validate or browser form validation can read this!
ready: function(el) { // You can actually access your element!
el.on('click', function() {
console.log($(this).val());
});
},
label: 'WHERE?!' // Or set
},
select: {
type: 'select2',
options: ['what', 'where', 'when']
},
radio: {
type: 'radio',
options: ['No', 'Yes'],
value: 'No'
}
});
// Extend Forma with more field types; e.g. define a reusable select2 field
Forma.fields['select2'] = function(o) {
var el = Forma.fields.select.call(this, o);
setTimeout(function() {
el.select2();
}, 0);
return el;
};
// Forma is happy to play well with Rivets.js, and other data binders
form.field = function(o) {
o['data-value'] = 'model.' + o.name;
return Forma.prototype.field(o);
};
// Easily use bootstrap for your form layout
form.row = function(label, o) {
var row = $('
' +
'' + label.capitalize() + '' +
'' +
'');
row.find('.controls').append(this.field(o));
return row;
};
// Render the form and append it to the document!
$('form').prepend(form.render());
// Elements can be accessed later
form.fields.radio.el[1].on('click', function() {
console.log('Tuning radio...')
});
```
#### Field types
- text (``)
- password (``)
- file (``)
- select (``)
- radio (``)
#### Plugins' fields
See `plugins.js`. Dependent on the actual plugins.
- date ([Bootstrap Datepicker](http://www.eyecon.ro/bootstrap-datepicker))
- slider ([Bootstrap Slider](http://www.eyecon.ro/bootstrap-slider/))
- select2 ([Select2](http://ivaynberg.github.io/select2/))