JavaScript Form

In this tutorial, we will learn, discuss, and understand the JavaScript form. We will also see the implementation of the JavaScript form for different purposes.

Here, we will learn the method to access the form, getting elements as the JavaScript form's value, and submitting the form.

The <form> element has two important attributes: action and method.

action is a URL that will process the form submission. In this case, it is /signup
method is the HTTP method to submit the form with. Typically, it is the post or get method. The post method sends data to the server as the request body while the get method appends the form data to the action URL with a ? operator.

In JavaScript, the form is represented as the HTMLFormElement object. The HTMLFormElement has the following corresponding properties:

action – the URL that will process the form data. It is equivalent to the HTML action attribute
method – can be get or post, which is equivalent to the HTML method attribute.

The HTMLFormElement element also provides the following useful methods:

submit() – submit the form.
reset() – reset the form.

Example -

<html>  
<head>  
<title> SignUp Page</title>  
</head>  
<body align="center" >  
<h1> CREATE YOUR ACCOUNT</h1>  
<table cellspacing="2" align="center" cellpadding="8" border="0">  
<tr><td> Name</td>   
<td><input type="text" placeholder="Enter your name" id="n1"></td></tr>  
<tr><td>Email </td>  
<td><input type="text" placeholder="Enter your email id" id="e1"></td></tr>  
<tr><td> Set Password</td>  
<td><input type="password" placeholder="Set a password" id="p1"></td></tr>  
<tr><td>Confirm Password</td>  
<td><input type="password" placeholder="Confirm your password" id="p2"></td></tr>  
<tr><td>  
<input type="submit" value="Create" onClick="create_account()"/>  
</table>  
<script type="text/javascript">  
function create_account(){  
var n=document.getElementById("n1").value;  
var e=document.getElementById("e1").value;  
var p=document.getElementById("p1").value;  
var cp=document.getElementById("p2").value;  
//Code for password validation  
        var letters = /^[A-Za-z]+$/;  
        var email_val = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;  
//other validations required code  
if(n==''||e==''||p==''||cp==''){  
alert("Enter each details correctly");  
}  
else if(!letters.test(n))  
        {  
            alert('Name is incorrect must contain alphabets only');  
        }  
else if (!email_val.test(e))  
        {  
            alert('Invalid email format please enter valid email id');  
        }  
else if(p!=cp)  
{  
alert("Passwords not matching");  
}  
else if(document.getElementById("p1").value.length > 12)  
{  
alert("Password maximum length is 12");  
}  
else if(document.getElementById("p1").value.length < 6)  
{  
alert("Password minimum length is 6");  
}  
else{  
alert("Your account has been created successfully... Redirecting to JavaTpoint.com");  
window.location="https://www.pustudy.com/";  
}  
}  
</script>  
</body>  
</html>