In this tutorial you will learn to create simple HTML form using jQuery script.
We have just created a blank div (form1) in HTML. Using jQuery we are updating complete HTML form in the div (form1). You can use the code directly in any of your project.
It consists of three files:
- Html file – jqueryform.html : In this file, a div is assigned to a form.
- jQuery file – jqueryform.js : Here, form elements are append in form using jQuery script.
- Css file – jqueryform.css : Here, look and feel of the form is optimized using css.
Below is our complete code with download and live demo option
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
}
Conclusion
Hope, this tutorial teach you about creating form using jQuery script.
Get more related stuff here –
- Textarea Enter Key Submit Data using jQuery
- jQuery Accordion Plugins
- jQuery Ajax Post Data
You can write down your feedback or share your codes in the comment form below:
6 Replies to “Create Form Using jQuery”
It’s actually a pleasant as well as useful bit of info. My business is pleased that you discussed this convenient info along with us. Remember to continue being you current like this. Appreciate revealing.
Your feedback is appreciated. :))
I’m trying to create a login form and a registration form on the same page both forms have userID and Passwords. But id’s are unique selectors!?!?!? I’m confused as how I would write this… but I need userId and passwords to be the same. Or do I??? Please help I’m lost and confused and can’t find the answer anywhere on the web… I found your site while looking for my answer and you seem understand… so I’m asking of help please. Thank You…
It is not satisfactory
i am trying to submit the same form using jauery ajax ..need help
good example any one can easily learn through this