Dynamically add Input fields to the form using JQuery, CSS and HTML.

In this tutorial we are showing how to add input fields to the form dynamically using jquery.
In this example I used jquery, css and html code for style in form and for adding input fields dynamically.

we have used here selection box for selecting and adding input fields to the form. we are using one </span> tag with id="addField" for executing add function into the form using jquery.
Every input field has one </span> tag to remove the field. if not required later.

We are using following fields in the form that is described into the image above.

HTML Code
Note: - we are using </span> tag with id="addField" by clicking this fields one other fields will add into the form. There are some default input fields available in the form.

        
            
            

                
                    -- Select Type --
                    Text
                    Textarea
                    File
                
                Add Field
            
            

                Name: 
                
            
        
    

CSS Code
CSS code are written below.

 #container{
            width:600px;
            margin:20px auto;
            padding:15px;
            background-color:#eee;
        }
        #addField{
            padding:5px;
            display:inline-block;
            background-color:#3A9668;
            color:#f1f1f1;
            border:1px solid #005;
        }
        .removeField{
            margin:auto;
            margin-left:5px;
            padding:5px;
            display:inline-block;
            background-color:#B02109;
            color:#f1f1f1;
            border:1px solid #005;
        }
        #addField:hover, .removeField:hover{
            cursor: pointer;
        }
        textarea{
            width:290px;
            height:150px;
        }
        input, textarea{
            padding:5px;
            font-size: 14px;
        }
  
   select {
            padding:5px;
        }
  
        input {
            width: 250px;
        }
  
   label{
            padding:0 10px;
            display:block;
            float:left;    
            width:150px;
        }
       
        .btn-submit {
            width: 100px;
            background-color:#428BCA;
            border-color:#357EBD;
        }    

Jquery Code

If you have any problem using this code then contact me through Contact form. Give us a feedback to improve my website.