Custom jQuery Plugin to display a Form using Twitter Bootstrap

In this post we describe Step by step How to Build a Custom jQuery Plugin to display a Form using Twitter Bootstrap.

In this article we build a custom jQuery Plugin to  display :
- a customizable HTML Form with all input types as required (including text, email, number, date, color, file, hidden, datetime, button input types)
- fully customizable style , with the defaults using Twitter Bootstrap CSS3 styles .

The complete jquery plugin can be downloaded from this GitHub repository:
https://github.com/CarmelSoftware/jQueryPlugin_CustomizableForm

This custom jquery plugin will display by default a HTML5 form like this:

 The javascript to display this form is just this:

How to Build a Custom jQuery Plugin to display a Form using Twitter Bootstrap 

We start by adding references to the jQuery and to the CSS3 Bootstrap style  frameworks. Therefore  browse to http://jquery.com/download/ and to  the  Bootstrap's web site and get the latest releases in CDN(Content Delivery Network):

Then add those links, and  also two new files (one for the  style , and the other one will hold our jQuery plugin) to the head element in a new HTML5 file   :

 Add a div to hold the web Form produced by our jquery plugin:

After the body element,  call the plugin:

Open the "jqueryplugin.js" javascript file and write an object to contain all defaults for our plugin:

Notice the classes properties , holding Twitter Bootstrap definitions.

Now  code the plugin as follows:

First thing our plugin will do is to merge the received arguments with the default ones, by using the jQuery $.extend() method  .

Next we create the Form using jQuery, and setting its style and action parameters:

We also added the Form's Title .

Then we loop over the oFields array, which contain the required input elements to be created together with the labels for its names:

Also we added the style.
Take a look at that array, and you will see that it contains the required input elements in the form of element-name + element-type like this :  "Attachment","file" .
Then we do the same with the oRadio array containing the radio buttons if required,  inserting  radiobuttons and its labels as follows,  looping over the collection and appending the created elements to a new <div> :

Finally, we add a <div> holding two buttons, for Resetting  and for Submitting the Form:

Our jquery plugin will return the "this" instance, to allow jquery chaining for it:

And our runtime fully customizable HTML5 Form will show as this:

Also, we code the following CSS3 style to the styles.css file:

We hope that this article was useful to you.

Happy programming with jQuery.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן