Create Dynamic Form Using JQuery and CSS
In this post you will learn to create Dynamic Form using JQuery and CSS.
- Html file – index.html In this file, a div is assigned to a form.
<!DOCTYPE html> <html> <head> <title>Create Dynamic Form Using jQuery and CSS</title> <link href="style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.js"></script> </head> <body> <div id="container"> <h2>Dynamically Created Form Using jQuery</h2> <div id="form1"> <!-- Dynamic Form Div --> </div> </div> </body> </html>
- Css file – style.css Here, look and feel of the form is optimized using css.
@import "http://fonts.googleapis.com/css?family=Raleway"; div#form1{ width:250px; height:430px; border:2px solid #a5a5a5; padding:20px; background-color:#f3f3f3; border-radius:3px; float:left; text-align:center; margin-left:100px; margin-top:50px } h3,p{ text-align:center; font-family:'Raleway',sans-serif; color:#006400 } input{ width:100%; margin:10px 0; padding:5px; height:35px; box-shadow:1px 1px 1px 1px gray; border-radius:3px } input#submit{ width:100%; margin:10px 15px 10px 0; padding:5px; background-color:#3fb8e8; box-shadow:0 3px 0 0 #3293ba; border-radius:3px; color:#fff; height:41px; font-size:16px } textarea{ margin:10px 0; padding:5px; box-shadow:1px 1px 1px 1px gray; border-radius:3px } div#container{ margin:50px auto; width:960px } h2{ font-family:'Raleway',sans-serif; color:#006400; text-shadow:1px 1px 1px gray }
- jQuery file – jquery.js Here, form elements are appended in a form using jQuery script.
$(document).ready(function() { $("div#form1").append( // Creating Form Div and Adding <h2> and <p> Paragraph Tag in it. $("<h3/>").text("Contact Form"), $("<p/>").text("This is my form. Please fill it out. It's awesome!"), $("<form/>", { action: '#', method: '#' }).append( // Create <form> Tag and Appending in HTML Div form1. $("<input/>", { type: 'text', id: 'vname', name: 'name', placeholder: 'Your Name' }), // Creating Input Element With Attribute. $("<input/>", { type: 'text', id: 'vemail', name: 'email', placeholder: 'Your Email' }), $("<textarea/>", { rows: '5px', cols: '27px', type: 'text', id: 'vmsg', name: 'msg', placeholder: 'Message' }), $("<br/>"), $("<input/>", { type: 'submit', id: 'submit', value: 'Submit' }))) });