Learn creating html form using JavaScript code. Here is the one of most important guide to tell you about complete JavaScript code to create html Form using JavaScript.
CSS Code:
.wraper{
width:800px;
margin:0 auto;
}
#formElement{
text-align:center;
border:1px solid #ccc;
width:400px;
padding-bottom: 10px;
padding:0 20px;
margin:auto
}
h1{
margin:15px 0;
text-align:center
}
label{
float:left;
font-size:17px;
font-weight:bold
}
input[type="text"]{
width:90%;
height:30px;
margin-bottom:25px;
margin-top:10px;
padding:5px 10px;
border:1px solid #111
}
textarea{
width:90%;
margin-bottom:25px;
padding:5px 10px;
margin-top:10px;
height:100px;
border:1px solid #111;
}
input[type="submit"]{
width:100%;
text-align:center;
padding:10px;
font-weight:bold;
color:#fff;
background-color:#16425D;
border:none;
font-size:18px;
cursor:pointer;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Inquiry Form using javascript</title>
</head>
<body>
<div class="wraper">
<h1>Inquiry Form using JavaScript</h1>
<div id="formElement"></div>
</div>
</body>
</html>
JavaScript Code:
// Fetching HTML Elements in Variable by Element ID.
var x = document.getElementById("formElement");
var createform = document.createElement('form'); // Create New HTML Element Form
createform.setAttribute("action", ""); // Set Action Attribute on the Form Element
createform.setAttribute("method", "post"); // Set Method Attribute on the Form Element
x.appendChild(createform);
var heading = document.createElement('h2'); // Heading of the Form
heading.innerHTML = "Inquiry Form";
createform.appendChild(heading);
var line = document.createElement('hr'); // Making Horizontal Line After Heading
createform.appendChild(line);
var wrap = document.createElement('div');
wrap.setAttribute("class", "form-group");
var namelbl = document.createElement('label'); // Create Label for Name Field
namelbl.innerHTML = "Full Name: "; // Set Field Labels
wrap.appendChild(namelbl); // Append Name Label in main Element
var inputetxt = document.createElement('input'); // Create Input Field for Name
inputetxt.setAttribute("type", "text");
inputetxt.setAttribute("name", "fullname");
wrap.appendChild(inputetxt);
createform.appendChild(wrap); // Append Name Input in main Element
var wrapemail = document.createElement('div');
wrapemail.setAttribute("class", "form-group");
var emaillabel = document.createElement('label'); // Create Label for Email Field
emaillabel.innerHTML = "Your Email: ";
wrapemail.appendChild(emaillabel); // Append Email Label in main Element
var emailelement = document.createElement('input'); // Create Input Field for Email
emailelement.setAttribute("type", "text");
emailelement.setAttribute("name", "email");
wrapemail.appendChild(emailelement);
createform.appendChild(wrapemail); // Append Email Input in main Element
var wrapmsg = document.createElement('div');
wrapmsg.setAttribute("class", "form-group");
var messagelabel = document.createElement('label');
messagelabel.innerHTML = "Your Message: ";
wrapmsg.appendChild(messagelabel); // Append Textarea Label in main Element
var texareaelement = document.createElement('textarea');
texareaelement.setAttribute("name", "message");
wrapmsg.appendChild(texareaelement);
createform.appendChild(wrapmsg); // Append Textarea in main Element
var submitbtn = document.createElement('input'); // Create Submit Button
submitbtn.setAttribute("type", "submit");
submitbtn.setAttribute("name", "btn");
submitbtn.setAttribute("value", "Submit");
createform.appendChild(submitbtn); // Append Button in main Element