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'
})))
});

Leave a Reply