HTML File â jqueryform.html
<!DOCTYPE html>
<html>
<head>
<title>Create Form Using jQuery - Demo Preview</title>
<link href="jqueryform.css" rel="stylesheet">
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jqueryform.js"></script>
</head>
<body>
<div id="container">
<h2>Dynamically Created Form Using jQuery</h2>
<div id="form1">
<!-- Dynamic Form Div -->
</div>
</div>
</body>
</html>
jQueryFile -jqueryform.js
$(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'
})))
});
Css File -jqueryform.css
@import "
http://fonts.googleapis.com/css?family=Raleway";
/*-----------------------------------------------------------------
CSS settings for HTML Div form1 (Dynamically Created using jQuery)
------------------------------------------------------------------*/
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
}
ä¸æ´å¥ä»£ç ä¾ä½ åèï¼è®°å¾é纳å¦