form.js

Easily create form in pure Javascript. If you are trying to use Javascript creating crazy forms. This will help you a lot!

Install

via bower

bower install form.js

after install form.js, use the script in bundles/bundle.js

Usage

Form

var form = new Form.main({
    id: 'test_id',
    class: 'text_cls',
    method: 'post',
    url: 'http://github.com'
});

form.append(`some html, this will be inside the form`);

Input

// text
// @param: 
// - input name
// - input other attributes
var text_input = new Form.input.text('test', {
    id: 'text_input_id',
    class: 'text_input_cls'
    // other attributes
});

// password
// @param: 
// - input name
// - input other attributes
var password_input = new Form.input.password('pwd', {
    id: 'password_input_id',
    class: 'password_input_cls'
    // other attributes
});

// radio
// @param: 
// - input name
// - input value
// - other attributes
var radio_input = new Form.input.radio('test_radio', 'radio_value', {
    // other attributes
});

// checkbox
// @param: 
// - input name
// - input value
// - other attributes
var checkbox_input = new Form.input.checkbox('test_checkbox', 'checkbox_value', {
    // other attributes
});

// submit
// @param: 
// - input value
// - other attributes
var text_input = new Form.input.submit('submit form', {
    id: 'text_input_id',
    class: 'text_input_cls'
    // other attributes
});

Textarea

// textarea
// @param: 
// - input name
// - input inner text
// - other attributes
var textarea_input = new Form.textarea('test_textarea', 'some text here', {
    // other attributes
});

Select

// select
// @param: 
// - input name [required]
// - select option tags value and inner text -> `value: inner text` [object] [required]
// - other attributes
var select_input = new Form.input.select('test_select',{
    key1: 'value1',
    key2: 'value2'
}, {
    // other attributes
    select: {
        // select tag attributes
    },
    option: {
        // option tag attributes
    }
});

File

// file
// @param: 
// - input name
// - other attributes
var file_input = new Form.file('file_test', {
    // other attributes
});

Label

// label
// @param:
// - for value
// - value
// - other attributes
var label_input = new Form.label('test', 'test_value', {
    // other attributes
});

Button

// label
// @param:
// - value
// - other attributes
var btn_input = new Form.btn('test_value', {
    // other attributes
});

API

html()

To html format.

Support

• textarea
• select
• file
• input(text, password, radio, checkbox, submit)
• label
• button

Develop

npm install // install watchify, browserify

build bundle

node build.js // This will automatically build the script to `bundles` folder

License

MIT @chilijung